仅通过单击即可在反应选择触发器上进行onchange事件

Question

我的应用程序中有一个<select>

<select onChange={ e=>{this.setState({selectedValue:e.target.value})} }>
    {this.state.someArr.map( val => <option value={val}> something </option>) }
</select>

现在，如果someArr中的someArr更改，它将导致在select元素内呈现新选项
但是onchange不会触发，状态内的selectedValue保持不变
我该如何克服这个问题？ 我希望自动设置新值

这里是JSBIN

Answer 1

首先，在使用React时，永远不要传递箭头功能，因为它每次都会传递不同的实例，并且可能导致不必要的渲染。

它不起作用的原因是，您试图在setState函数中访问该事件，并且您无法执行该操作。

这是您应该做的：

export default class Component extends React.Component {
    constructor(props) {
        super(props);

        this.state = {
            selectedValue: '',
            someArr: []
        };
    }

    onChange(e) {
        let value = e.target.value;
        this.setState({ selectedValue: value });
    }

    render () {
        return <select onChange={this.onChange}}>
                {this.state.someArr.map( val => <option value={val}> something </option>) }
            </select>   
    }
}

Answer 2

您需要做的就是正确设置value prop。

<select value={this.state.selectedValue} onChange={ e=>{this.setState({selectedValue:e.target.value})} }>
    {this.state.someArr.map( val => <option value={val}> something </option>) }
</select>

希望这对您有用。