react如何获取option的下标和值_如何在ReactJS中获得下拉菜单的选定值

小编典典

render方法中的代码表示任何给定时间的组件。如果您执行以下操作，则用户将无法使用表单控件进行选择：

Orange

Radish

Cherry

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

受控组件 使用组件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 (

value={this.state.selectValue}

onChange={this.handleChange}

>

Orange

Radish

Cherry

{message}

);

}

});

React.render(, document.body);

JSFiddle：http :

//jsfiddle.net/xe5ypghv/

不受控制的组件 另一个选择是不控制值，而只是响应onChange事件。在这种情况下，您可以使用defaultValue道具设置初始值。

onChange={this.handleChange}

>

Orange

Radish

Cherry

{message}

更新

选项1的一种变体(使用受控组件)是使用Redux和React-

Redux创建一个容器组件。这涉及到connect一个mapStateToProps功能，它比听起来容易，但如果您刚入门，可能会过大。

2020-07-22