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

Question

我正在使用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>

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
，还展示了如何使用多个选择。

更新

选项1的一种变体（使用受控组件）是使用Redux和React-
Redux创建一个容器组件。这涉及到connect一个mapStateToProps功能，它比听起来容易，但如果您刚入门，可能会过大。