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

发布于03月18日

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

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

Controlled Components使用组件state反映用户的 Select .这提供了最多的控制，因为对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/

Uncontrolled Components另一个选项是不控制值，只响应onChange个事件.在这种情况下，可以使用defaultValueprops 设置初始值.

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