我正在使用 react，我想在 react 中获取下拉列表中所选选项的值，但我不知道如何操作。有什么建议？谢谢！我的下拉列表只是一个选择，如：
<select id = "dropdown">
<option value="N/A">N/A</option>
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
<option value="4">4</option>
</select>
render方法中的代码表示任何给定时间的组件。如果你做这样的事情，用户将无法使用表单控件进行选择：
<select value="Radish">
<option value="Orange">Orange</option>
<option value="Radish">Radish</option>
<option value="Cherry">Cherry</option>
</select>
因此，有两种使用表单控件的解决方案：
state来反映用户的选择。这提供了最多的控制，因为您所做的任何更改state都将反映在组件的渲染中：例子：
var FruitSelector = React.createClass({
getInitialState:function(){
return {selectValue:'Radish'};
},
handleChange:function(e){
this.setState({selectValue:e.target.value});
},
render: function() {
var message='You selected '+this.state.selectValue;
return (
<div>
<select
value={this.state.selectValue}
onChange={this.handleChange}
>
<option value="Orange">Orange</option>
<option value="Radish">Radish</option>
<option value="Cherry">Cherry</option>
</select>
<p>{message}</p>
</div>
);
}
});
React.render(<FruitSelector name="World" />, document.body);
JSFiddle：http : //jsfiddle.net/xe5ypghv/
不受控制的组件另一种选择是不控制值并简单地响应onChange事件。在这种情况下，您可以使用defaultValueprop 设置初始值。
<div>
<select defaultValue={this.state.selectValue}
onChange={this.handleChange}
>
<option value="Orange">Orange</option>
<option value="Radish">Radish</option>
<option value="Cherry">Cherry</option>
</select>
<p>{message}</p>
</div>
http://jsfiddle.net/kb3gN/10396/
这方面的文档很棒：http : //facebook.github.io/react/docs/forms.html 并且还展示了如何使用多个选择。
选项 1（使用受控组件）的一个变体是使用Redux和React-Redux创建容器组件。这涉及到connect一个mapStateToProps函数，这比听起来容易，但如果您刚刚开始，可能会矫枉过正。
将您的下拉菜单实现为
<select id = "dropdown" ref = {(input)=> this.menu = input}>
<option value="N/A">N/A</option>
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
<option value="4">4</option>
</select>
现在，要获取下拉菜单的选定选项值，只需使用：
let res = this.menu.value;
只需使用对象的onChange事件<select>。选择的值在e.target.value那时。
顺便说一句，使用id="...". 最好使用ref=">.."
http://facebook.github.io/react/docs/more-about-refs.html
对于前端开发人员来说，很多时候我们都在处理我们必须处理下拉列表的表单，我们必须使用所选下拉列表的值来执行某些操作或将值发送到服务器上，这非常简单要在 HTML 中编写简单的下拉列表，只需在用户更改下拉列表的值时将一个 onChange 方法放在下拉列表中，将该值设置为 state，以便您可以轻松地在 AvFeaturedPlayList 中访问它 1 请记住，您将始终获得作为选项值的结果而不是屏幕上显示的下拉文本
import React, { Component } from "react";
import { Server } from "net";
class InlineStyle extends Component {
constructor(props) {
super(props);
this.state = {
selectValue: ""
};
this.handleDropdownChange = this.handleDropdownChange.bind(this);
}
handleDropdownChange(e) {
this.setState({ selectValue: e.target.value });
}
render() {
return (
<div>
<div>
<div>
<select id="dropdown" onChange={this.handleDropdownChange}>
<option value="N/A">N/A</option>
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
<option value="4">4</option>
</select>
</div>
<div>Selected value is : {this.state.selectValue}</div>
</div>
</div>
);
}
}
export default InlineStyle;
它应该是这样的：
import React, { useState } from "react";
export default function App() {
const getInitialState = () => {
const value = "Orange";
return value;
};
const [value, setValue] = useState(getInitialState);
const handleChange = (e) => {
setValue(e.target.value);
};
return (
<div>
<select value={value} onChange={handleChange}>
<option value="Orange">Orange</option>
<option value="Radish">Radish</option>
<option value="Cherry">Cherry</option>
</select>
<p>{`You selected ${value}`}</p>
</div>
);
}
你可以在这里看到它：https : //codesandbox.io/s/quizzical-https-t1ovo?file=/src/App.js : 0-572