如何在 ReactJS 中获取下拉菜单的选定值

Question

我正在使用反应，我想在反应中获取下拉列表的选定选项的值，但我不知道如何。有什么建议么？谢谢！

我的下拉列表只是一个选择，例如：

<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>

原文由 BlueElixir 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 1

render 方法中的代码表示任何给定时间的组件。

如果您这样 做，用户将无法使用表单控件进行选择：

 <select value="Radish">
 <option value="Orange">Orange</option>
 <option value="Radish">Radish</option>
 <option value="Cherry">Cherry</option>
 </select>

因此，有两种使用表单控件的解决方案：

1. 受控组件 使用组件 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/

1. 不受控制的组件 另一种选择是不控制值并简单地响应 onChange 事件。在这种情况下，您可以使用 defaultValue 设置初始值。

 <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

并展示如何使用多项选择。

更新

Option 1 的一个变体（使用受控组件）是使用 Redux 和 React-Redux 创建 容器组件。这涉及到 connect 和 mapStateToProps 函数，这比听起来要容易，但如果您刚刚开始，可能会矫枉过正。

原文由 Max Heiber 发布，翻译遵循 CC BY-SA 3.0 许可协议

Answer 2

将您的下拉菜单实现为

<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;

原文由 Shubham Khatri 发布，翻译遵循 CC BY-SA 3.0 许可协议