如何获取ReactJS中下拉菜单的选定值 [英] How to get selected value of a dropdown menu in ReactJS

问题描述

我正在使用反应，我想获得一个下拉列表的选定选项的值，但我不知道如何。有什么建议么？谢谢！
我的下拉菜单只是一个选择：

I'm using react and I want to get the value of the selected option of a dropdown in react but I don't know how. Any suggestions? thanks! My dropdown is just a select like:

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

推荐答案

方法表示任何给定时间的组件。
如果您执行类似于此，则用户将无法使用表单控件进行选择：

The code in the render method represents the component at any given time. If you do something like this, the user won't be able to make selections using the form control:

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

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

So there are two solutions for working with forms controls:

1. 受控组件使用组件状态来反映用户的选择。这提供了最大的控制，因为您对状态所做的任何更改都将反映在组件的呈现中：

1. Controlled Components Use component state to reflect the user's selections. This provides the most control, since any changes you make to state will be reflected in the component's rendering:

示例：

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/

JSFiddle: http://jsfiddle.net/xe5ypghv/

1. 不受控制的组件另一个选项是不控制该值，只需回复 onChange 事件。在这种情况下，您可以使用 defaultValue prop设置初始值。

1. Uncontrolled Components The other option is to not control the value and simply respond to onChange events. In this case you can use the defaultValue prop to set an initial value.

<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
并且还显示如何使用多种选择。

The docs for this are great: http://facebook.github.io/react/docs/forms.html and also show how to work with multiple selections.

选项1（使用受控组件）的变体是要使用 Redux 和 React-Redux 创建一个容器组件。这涉及 connect 和一个 mapStateToProps 函数，这比它听起来更容易，但是如果刚刚开始。

A variant of Option 1 (using a controlled component) is to use Redux and React-Redux to create a container component. This involves connect and a mapStateToProps function, which is easier than it sounds but probably overkill if you're just starting out.

这篇关于如何获取ReactJS中下拉菜单的选定值的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！