Как предотвратить модальный повторный рендеринг при обновлении состояния?

Question

У меня есть реагирующая модель bootstrap с двумя входами внутри. Модальное отображается, когда свойство showModal в состоянии изменяется на true. Я обновляю свойство fieldOne (также внутри состояния) при изменении входного значения. Таким образом, всякий раз, когда я вводю что-то на вход, модальные вспышки (перерисовываются) также.

Как предотвратить повторный рендеринг модала при обновлении состояния?

Answer 1

Если вы не хотите повторного рендеринга, используйте переменную, отличную от state, для хранения ваших данных:

constructor (props) {
  super(props);
  this.state = {
    input: ''
  };
  this.holder = '';
}
handleInput(input) {
  this.holder = input;
}
submitInput() {
  this.setState({input: this.holder})
}
render () {
  return (
    <input type="text" onChange={(e) => this.handleInput(e.target.value)} onBlur={() => this.submitInput()} />
  )
}

Цель состояния состоит в том, чтобы React оценил необходимость изменения DOM, и если он это делает, то он рендерится заново.

Answer 2

Может быть, вам следует разделить ваш мод с входами на два отдельных компонента. Это должно исправить ваши проблемы с рендерингом.