反应式复位

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

你可以用两种方式。

你可以得到表格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
    });
}

Answer 2

欢迎来到董事会。实际上，在上面的代码中，您并不是在更新组件的状态。

我在沙箱中做了一些东西，让您更好地了解如何使用本质上相同的方法来更新您的状态。

另外，尝试永远不要变异您的状态。

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