我在 React 中有一个输入元素和一个按钮：
<li><input type="text" placeholder="Enter new ID"></input>
<button onClick={(e)=>this.saveKonfigElementHandler()}>Save</button></li>
现在，当我在输入字段中输入一些值时，我想在单击按钮时将该值保存到某个数组中。 是否可以以某种方式获取对该输入字段的引用(例如输入字段的 target.value)以在单击按钮时保存它？
或者我只需要使用将当前输入值保存到某个变量中的 onChange 事件来执行此操作，当我单击该按钮时，我将简单地检索该值以将其保存到某个数组中？也许那会简单得多。
例如：
<input type="text" value={this.state.inputFieldText.join('')} onChange={(event) => this.textHandler(event)}></input>
在 textHandler 方法中，我将输入字段中的目标值保存到 textHandler() 方法中的类组件状态变量中。当我单击该按钮时，我检索该状态值并可以对其进行一些操作？
使用函数组件、钩子和受控表单元素来实现此目的的一种现代方法是：
import { useState } from 'react'
function MyComponent({ initialId, onSave }) {
const [newId, setNewId] = useState(initialId)
return (
<li>
<input
type="text"
placeholder="Enter new ID"
onChange={(e) => setNewId(e.target.value)}
/>
<button onClick={() => onSave(newId)}>Save</button>
</li>
)
}
我还要指出，使用label元素而不是占位符来描述字段的用途被认为是更好的可访问性做法。占位符更适合示例输入。
是否可以以某种方式获取对该输入字段的引用(例如输入字段的 target.value)以在单击按钮时保存它？
是的。
或者我只需要使用将当前输入值保存到某个变量中的 onChange 事件来执行此操作，当我单击该按钮时，我将简单地检索该值以将其保存到某个数组中？也许那会简单得多。
这将是一种稍微更 React 的方式来做到这一点。
您的仅 DOM 方法更"不受控制"(请参阅这些文档以了解受控/不受控制的含义)。你会这样做：
-
更改
onClick以将e传递给处理程序：onClick={(e)=>this.saveKonfigElementHandler(e)} -
在
saveKonfigElementHandler中，使用e.target.previousElementSibling访问input：saveKonfigElementHandler(e) { const { value } = e.target.previousElementSibling; // Use `value` ... }
当然，这是脆弱的;如果你改变你的结构，让另一个元素在button和input之间，或者input在容器元素内，等等，它就会破裂 ——这是受控方法的一个论据。您可以在button上的数据属性中存储指向input的链接：
<li><input id="id-input" type="text" placeholder="Enter new ID"/>
<button data-input="#id-input" onClick={(e)=>this.saveKonfigElementHandler(e)}>Save</button></li>
然后使用querySelector获取它：
saveKonfigElementHandler(e) {
const { value } = document.querySelector(e.target.getAttribute("data-input"));
// Use `value` ...
}
但是你必须保持选择器的唯一性，等等。
你选择哪个，受控还是不受控制，最终取决于你。
我不确定你的问题。你想要这样的东西吗？
<button data-input="#id-input" onClick={this.saveKonfigElementHandler(value)}>Save</button></li>
saveKonfigElementHandler = (value) => (event) => {}