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

欢迎来到董事会。看起来好像不是在上面的代码中更新组件的状态。

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

也请尝试从不更改您的状态。

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

反应形式重置

2 个答案: