仅通过单击反应选择触发器上的 onchange 事件答案

【问题标题】：onchange event on react select trigger only by clicking仅通过单击反应选择触发器上的 onchange 事件
【发布时间】：2016-08-21 20:34:05
【问题描述】：

我的反应应用中有一个<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

【问题讨论】：

你试过'onChange' (camelCase)吗？
是的，我用过camelCase one。那是我的打字错误
在 select 上设置 value 属性可能会起作用：<select value={this.state.selectedValue} ...>
@Vijay 我认为我解释的问题不正确。我已经添加了 jsbin 。请看一下jsbin链接

标签： javascript reactjs

【解决方案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>   
    }
}

【讨论】：

非常感谢您的好建议，但这还没有奏效。问题是当您更改 someArr 时，新选项会在 select 元素中呈现，但 onChange 永远不会被调用，除非用户单击某些选项。但我希望在呈现新选项后自动调用onChange
您可以尝试使用 map 函数的第二个参数将索引传递给每个选项，并将 selectedIndex 存储在您的状态中，当数组发生变化时，根据索引重新计算所选值。跨度>

【解决方案2】：

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

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

我希望这对你有用。

【讨论】：