Реагировать на сброс формы

Question

this.state = {
  name: "",
  arr: [],
  story: ""
};

add(e) {
e.preventDefault();
this.setState({
  story: e.target.value
});
this.state.arr.push(this.state.story);
this.form.reset();

}

 <form action="">
        <input onChange={this.b} type="text" />
        <button type="submit" className="not" onClick={this.add}>
          Next
        </button>
      </form>
      <p>You did it {this.state.name}</p>

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

Answer 1

добро пожаловать на доски. На самом деле не похоже, что вы обновляете состояние вашего компонента в приведенном выше коде.

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

Также попробуйте никогда не изменять ваше состояние .

https://codesandbox.io/s/6jnmr50vnr

Answer 2

Вы можете использовать его двумя способами.

Вы можете получить идентификатор формы и сбросить настройки. Вы должны предоставить идентификатор для формы.

<form action="" id="submit-form">  // id given
        <input onChange={this.b} type="text" />
        <button type="submit" className="not" onClick={this.add}>
          Next
        </button>
      </form>
      <p>You did it {this.state.name}</p>

Вы можете просто использовать неконтролируемые способы

 add(e) {
e.preventDefault();
this.setState({
  story: e.target.value
});
this.state.arr.push(this.state.story);
  document.getElementById("submit-form").reset();}

или контролируемыми способами.

     add(e) {
    e.preventDefault();
    this.setState({
      story: e.target.value
    });
    this.state.arr.push(this.state.story);
     this.setState({
      story: ''   //set empty value
    });
}