如何在 React 中使用 <select> 使用 onChange 进行更改？

Question

我正在制作一个使用下拉菜单的应用，例如：

            <select name="color">
              <option value="red" onChange={this.func}>Red</option>
              <option value="blue" onChange={this.func}>
                Blue
              </option>
            </select>

但是，onChange 函数不起作用。给出的函数是：

  func = () => {
    console.log("Color");
  };

我想知道为什么这不起作用？应该怎么做才能让它发挥作用？

提前致谢。

Answer 1

您的代码不起作用，因为选择会触发 onChange 事件，而选项不会。您需要将 onChange 事件处理移动到 <select/>:

 <select name="color" onChange={this.func}>
   <option value="red">Red</option>
   <option value="blue">Blue</option>
 </select>

// and for your func:
func = (event) => {
  //event.target.value contains the selected option value, e.g. "red"
  console.log("Color: ", event.target.value);
};

如何在 React 中使用 <select> 使用 onChange 进行更改？

How to make changes by using onChange using <select> in React?

html

drop-down-menu

reactjs