React 控制的选择元素恢复为第一个选项答案

【问题标题】：React controlled select element reverts to first optionReact 控制的选择元素恢复为第一个选项
【发布时间】：2016-04-03 12:20:27
【问题描述】：

我正在使用 React 创建一个受控的选择元素。我的应用程序验证用户选择的新选项值，然后更新元素上的该值。验证需要一些时间，我观察到的行为如下：

用户选择一个选项
元素将所选选项更改为索引 0
验证期结束后，元素会自行更新为新值

我不明白为什么元素会恢复到第一个索引以及如何防止这种情况（除非立即设置值，这在我的应用程序中是不希望的）

使用此 JSFiddle 查看此行为（选择 Option2）https://jsfiddle.net/qo39g2j4/

var Select = React.createClass({
  render: function() {
    return (
        <select id="my-select" value={this.props.value} onChange={this.props.onChange}>
            <option value="Option1">Option1</option>
            <option value="Option2">Option2</option>
            <option value="Option3">Option3</option>
        </select>
    );
  }
});

var Wrapper = React.createClass({
    getInitialState: function () {
        return {value: "Option3"};
    },
    onChange: function (event) {
        var value = event.target.value;
        setTimeout(function () {
            this.setState({value: value});
        }.bind(this), 1000); // this simulates the validation period
    },
    render: function () {
        return (
            <Select
                value={this.state.value}
                onChange={this.onChange}/>
        );
    }
});

ReactDOM.render(
    <Wrapper/>,
    document.getElementById("container")
);

【问题讨论】：

标签： javascript jquery select reactjs option

【解决方案1】：

尝试在您的Select 组件中使用defaultValue 而不是value。或者在onChange中添加event.preventDefault()。

【讨论】：

将值更改为 defaultValue 会使它成为一个不受控制的组件，如果验证失败，我将无法更改其值。 event.preventDefault() 在 JSFiddle 和真实应用中似乎不起作用
@AmitFridman 也许您可以尝试将state 设置两次onChange。验证前，验证后。

【解决方案2】：

由于 onBlur 事件处理程序中的问题，在我的应用程序中集成 redux-form 时，我遇到了同样的问题，所以这是我使用 customSelect 反应组件处理它的方式：

export default class CustomSelect extends Component {
  render() {
    const { children, value, onBlur, ...props } = this.props

    return (
      <select
        {...props}
        onBlur={() => onBlur(value)}
      >
      {children}
      </select>
    )
  }
}

这里的 onBlur eventHandler 使用传递的值显式调用，以保持它被选中

客户端或服务器端的验证也不应该用超时来表示，因为如果验证消息无效，用户会看到错误的输入数据，

我猜你的实现意味着选择的选项只有在有效时才可见，这不是你可以拥有的最佳用户体验，如果这是实际情况

解决方案基于redux-form react-select bug

【讨论】：