Question

我的反应应用程序中有<select>

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

现在，如果状态中的someArr发生变化，则会导致在选择元素
中呈现的新选项但是onchange没有被触发，而州内的selectedValue仍未受到影响我该如何克服这个问题？我希望自动设置新值

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

您需要做的就是正确设置<Command k>道具。

value

我希望这适合你。

onchange事件on react选择触发器只能通过单击

2 个答案: