javascript - 反应表单重置

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

欢迎来到董事会。看起来您并没有在上面的代码中更新组件的状态。

我在沙盒中制作了一些东西，让您更好地了解如何使用与您使用的方法基本相同的方法来更新您的状态。

另外，尽量不要改变你的 state。

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

Answer 2

您可以通过两种方式使用它。

您可以获取表单 ID 并重置。您需要提供 id 才能形成。

<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
    });
}