Как сразу избежать изменения состояния onChange?

В моем приложении ReactJS у меня есть форма отправки с одним полем ввода, которое я хочу сохранить общим:

if (questions[this.state.currentDialog].entry)
  return (
    <form onSubmit = {this.onFormSubmit}>
      <label>{toWrite.label}</label>
      {' '}
      <input
        name = {toWrite.name}
        onChange = {this.onInputChange}
      />
      {' '}
      <input type='submit' value='Send it >'/>
    </form>
  );

А мой onInputChange выглядит так:

onInputChange = (evt) => {
  if (evt.target.name == 'name') {
    this.setState({
      surveyState: {
        name: evt.target.value,
        change: this.state.surveyState.change,
      }
    });
  };
  if (evt.target.name == 'change') {
    this.setState({
      surveyState: {
        name: this.state.surveyState.name,
        change: evt.target.value,
      }
    });
  };
};

Прямо сейчас surveyState меняется каждый раз, когда вы что-то пишете, но вы можете пропустить отправку формы с помощью другой общей кнопки, но состояние уже изменено onInputChange и будет отображаться в следующем представлении состояния, которое запускается Кнопка skip. Как этого избежать?

🤔 А знаете ли вы, что...
JavaScript - это скриптовый язык программирования, разработанный Netscape Communications Corporation.


56
2

Ответы:

Если у вас есть два свойства в вашем surveyState, вам нужно обновить оба, например value и change, в вашем случае, если вы не хотите, а затем отделите их от surveyState и объявите как отдельное состояние.

Что я сделал, так это использовал оператор распространения ..., который принесет вам объект как есть, а затем передал новое значение свойства. Здесь будет добавлено новое значение свойства, если оно не существует, иначе обновите то же самое.

Это будет выполнять те же функции, которые вы пытаетесь достичь.

onInputChange = (evt) => {
   if (evt.target.name == 'name') {
       this.name = evt.target.value
   };
   if (evt.target.name == 'change') {
      this.change = evt.target.value 
   };
};
Using `this` variable only to avoid re-rendering but onlt if you are using this state value for manupulation.

затем onFormSubmit

const surveyState = {
    name = this.name,
    change = this.change
}
this.setState({surveyState })

Решено

Сохраните его во временном объекте состояния.

onInputChange = (evt) => {
  if (evt.target.name === 'name') {
    this.setState({
      tempState: {
        name: evt.target.value,
      }
    });
  };
  if (evt.target.name === 'change') {
    this.setState({
      tempState: {
        change: evt.target.value,
      }
    });
  };
};

При отправке сохраните его в реальном, при пропуске вам не нужно ничего делать или просто очистить tempState:

onFormSubmit = (evt) => {
  evt.preventDefault();

  this.setState(state => ({
    surveyState: {
      ...state.surveyState,
      ...state.tempState,
    }
  }));
}