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

Z时代
2024-01-10
分类：问答

我正在使用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事件。在这种情况下，您可以使用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

，还展示了如何使用多个选择。