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

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

使用函数组件、钩子和受控表单元素的现代方法是：

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。占位符更适合例如输入。