如何从 React 中的 <select> 标签接收和传递值？ [复制]答案

【问题标题】：How to receive and pass value from <select> tag in React? [duplicate]如何从 React 中的 <select> 标签接收和传递值？ [复制]
【发布时间】：2023-03-28 05:57:01
【问题描述】：

嘿，我需要将所选选项中的值传递给setAgeAnswer()，这会更新我的状态。

<select onChange={() =>setAgeAnswer(/*value of a selected option*/) }>
  {AgeList.map(element => (
    <option key={element} value={element}>
      {element}
    </option>
  ))}

我不知道怎么做，我试过这个：

const getValue = (object, callback) => {
   callback(object.value);
};

<select onChange={() => getValue(this, setAgeAnswer)}>

但this 在此范围内未定义。

【问题讨论】：

看来你在 React 方面可能缺乏基础知识。了解 props，以及 React/JS 中 this 的限制对于创建 WAPP 至关重要。
@Dylan 你是对的。我绝对需要检查它

标签： reactjs

【解决方案1】：

首先，onChange 事件接收事件作为参数，您可以使用它来获取选择的值，例如event.target.value.

其次，在 React 中使用 <select> 时，在实际的 <select> 元素上设置 value。

<select value={this.state.yourValue} onChange={(event) =>setAgeAnswer(event.target.value) }>

【讨论】：

感谢@MrCode，它有效。老实说，我什至不会想到它

【解决方案2】：

事件处理程序的第一个参数是事件对象。它包含目标，它是触发事件的 DOM 元素。所以你只需要获取它的当前值

<select onChange={(e) => setAgeAnswer(e.target.value) }>
  {AgeList.map(element => (
    <option key={element} value={element}>
      {element}
    </option>
  ))}

【讨论】：

【解决方案3】：

试试：

onChange={(value)=>setAgeAnswer(value)}

【讨论】：