Возвращаемый элемент управления возвращается к первому варианту

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

У меня была такая же проблема при интеграции redux-form в мое приложение, из-за проблем в обработчик событий ONBLUR, так вот как я справилась с использованием 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