反应形式重置

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 并重置。您需要为表单提供 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

欢迎来到看板。在上面的代码中，您似乎真的没有更新组件的 state。

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

另外，尽量永远不要改变你的状态。

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

反应形式重置

React form reset

javascript

arrays

reactjs

react-state-management

react-state