Элемент выбора, управляемый реакцией, возвращается к первому варианту

Я использую React для создания управляемого элемента выбора. Мое приложение проверяет новое значение параметра, выбранное пользователем, а затем обновляет это значение в элементе. Проверка занимает некоторое время, и я наблюдаю следующее поведение:

  • Пользователь выбирает вариант
  • Элемент изменяет выбранный параметр на индекс 0
  • По истечении периода проверки элемент обновляется до нового значения.

Я не понимаю, почему элемент возвращается к первому индексу и как я могу предотвратить это (за исключением немедленной установки значения, которое нежелательно в моем приложении)

Используйте этот JSFiddle, чтобы увидеть это поведение (выберите вариант 2) 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")
);

reactjs javascript jquery select option
person Amit Fridman    schedule 29.12.2015    source источник

Ответы (2)


arrow_upward
1
arrow_downward

Попробуйте использовать defaultValue вместо value в вашем Select компоненте. Или добавьте event.preventDefault() в onChange.

person oobgam    schedule 29.12.2015
comment
Изменение значения на defaultValue сделает этот компонент неконтролируемым, и я не смогу изменить его значение в случае сбоя проверки. event.preventDefault (), похоже, не работает в JSFiddle и в реальном приложении - person Amit Fridman; 31.12.2015
comment
@AmitFridman, возможно, вы можете попробовать установить state дважды onChange. до валидации и после валидации. - person oobgam; 31.12.2015

arrow_upward
0
arrow_downward

У меня была такая же проблема при интеграции redux-form в мое приложение из-за проблемы в onBlur, поэтому вот как я справился с этим с помощью компонента customSelect response:

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

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

Здесь onBlur eventHandler явно вызывается с переданным значением, чтобы оно оставалось выбранным.

Также проверка на стороне клиента или на стороне сервера не должна быть представлена ​​тайм-аутом, поскольку ожидается, что пользователь увидит неправильные входные данные с сообщением проверки, если оно недействительно,

Я предполагаю, что ваша реализация означает, что выбранный вариант будет виден только в том случае, если он действителен, что не является лучшим пользовательским интерфейсом, который вы можете иметь, если это реальный случай

Решение основано на ошибке response-select в redux-form

person Mohamed Labib    schedule 07.06.2016