Question

我在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（）方法中的“类组件”状态变量中。当我单击按钮时，我会检索该状态值并可以对其进行一些操作？

Answer 1

单击按钮是否可以某种方式获取对该输入字段的引用（例如输入字段的target.value）以保存它？

是的

还是只需要通过将当前输入值保存到某个变量中的onChange事件来完成该操作，然后单击按钮，便会简单地检索该值以将其保存到某个数组中？也许那会简单得多。

那将是一种稍微更React的方式。

您的仅DOM方法更“不受控制”（有关受控制/不受控制的含义，请参见these docs）。您可以这样：

更改您的onClick，将e传递给处理程序：
```
onClick={(e)=>this.saveKonfigElementHandler(e)}
```

在saveKonfigElementHandler中，使用e.target.previousElementSibling访问input：

saveKonfigElementHandler(e) {
    const { value } = e.target.previousElementSibling;
    // Use `value` ...
}

那当然很脆弱；如果更改结构以使另一个元素位于button和input之间，或者input位于容器元素之内，依此类推，则会中断-这是一个参数受控方法。您可以在input的data属性中存储指向button的链接：

<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` ...
}

但是您必须保持选择器的唯一性，等等。

您选择的是受控的还是不受控制的最终取决于您自己。

Answer 2

我不确定您的问题。你想要这样的东西吗？

<button data-input="#id-input" onClick={this.saveKonfigElementHandler(value)}>Save</button></li>

saveKonfigElementHandler = (value) => (event) => {}

Answer 3

具有功能组件，挂钩和受控表单元素的

A modern way to do it是：

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>
  )
}

我还要注意，it is considered better accessibility practice使用label元素来描述字段的目的，而不是占位符。占位符更适合示例输入。

React / Next.js如何在单击按钮时获取其他Element事件目标值

3 个答案: