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

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

A modern way to do it ，具有功能组件、 Hook 和受控表单元素，是:

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 元素来描述字段的用途，而不是占位符。占位符更适合示例输入。