Question

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

用户选择一个选项
元素将所选选项更改为索引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")
);

Answer 1

尝试在defaultValue组件中使用value代替Select。或者在event.preventDefault()中添加onChange。

Answer 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

React控制的select元素恢复为第一个选项

2 个答案: