Рендеринг значения состояния в поле ввода в React Redux делает значение неизменяемым.

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

В моем компоненте у меня есть свойство, называемое событием в состоянии, которое исходит от соединения, подобного этому.

function mapStateToProps(state)
{
    return {
        submittingForm : state.editEvent.submittingForm,
        formErrors : state.editEvent.formErrors,
        event: state.editEvent.event,
    };
}

Как вы можете видеть, зарегистрированное событие исходит от редуктора. В моем компоненте я могу получить событие следующим образом.

this.props.event.name

Теперь, когда я редактирую событие, я пытаюсь сохранить значения события в поле ввода.

Поэтому я отображаю значение состояния в поле ввода вот так.

<TextField
      name="location"
      label="Location"
      value={this.props.event? this.props.event.location: ""} />

Он поддерживает значение в поле ввода. Но проблема в том, что я не могу изменить поле ввода сейчас. Я могу сосредоточиться на поле ввода текста, но когда я ввожу что-либо с помощью клавиатуры, значение не меняется, а просто продолжает отображать значение состояния. Как я могу решить проблему?


reactjs javascript redux react-state-management
person Wai Yan Hein    schedule 14.07.2018    source источник
comment
Где вы слушаете ввод?   -  person st4rl00rd    schedule 14.07.2018
comment
Вам необходимо установить событие onChange в компоненте TextField, которое отправляет действие для обновления соответствующего редьюсера или изменяет локальное состояние компонента.   -  person Dez    schedule 14.07.2018
comment
@Dez Спасибо за предложение. Это раздражающий шаблон (Redux).   -  person Wai Yan Hein    schedule 14.07.2018
comment
Привет, это работает. Но это очень медленно. Пока я печатал в текстовом поле, я вижу отставание, потому что я думаю, что реакция постоянно обновляет DOM. Есть ли лучший способ сделать это, пожалуйста?   -  person Wai Yan Hein    schedule 14.07.2018

Ответы (1)


arrow_upward
0
arrow_downward

Если это медленно, я бы использовал что-то вроде функции debounce (см. здесь: https://lodash.com/docs/#debounce). По сути, это полезно, когда у вас есть группы частых событий, и вы хотите вызвать какую-то функцию только тогда, когда с момента последнего события прошло определенное время ожидания.

Таким образом, вместо того, чтобы генерировать новое событие каждый раз, когда что-то изменяется, вы можете генерировать его только через 300-500 мс после того, как пользователь закончил печатать. Это похоже на объединение всех изменений в одно обновление. Если это приемлемо для вашей проблемы, вот как вы можете это сделать:

var debouncedOnChange = _.debounce(current_onChange_method, 300 or another time in ms);

Затем в <TextField> установите onChange на debouncedOnChange.

person Ivan Sorokin    schedule 14.07.2018