javascript - 单击按钮时清除表单

Question

我正在尝试使用 React 清除 onClick 表单。该事件触发，但是当我尝试将 State 设置为“”时，它告诉我无法设置未定义的状态。

我尝试通过多种方式将状态设置为空。

onHandleChange(e) {
this.setState({
input: e.target.value
});
}

clearForm(e) {
e.preventDefault();
const input = this.state.input;
console.log("input", input);
this.setState({
  input: ""
});
}

我还尝试使用 onClick={(this.form.elements["text-input"].value = "")} 内联执行此操作。

<button
  className="reset btn btn-danger"
  type="reset"
  id="resetInput"
  value="reset"
  onChange={this.onHandleChange}
  onClick={this.clearForm}
>
  Reset
</button>

我的预期输出是输入的值应该为零。空字符串。然而，这并没有发生......我不会重置状态。

Answer 1

发生这种情况是因为您没有将其正确绑定(bind)到 clearForm 函数。

无法将状态设置为未定义。此错误意味着在 this.state 中，this 未定义

使用arrow函数正确绑定(bind)this上下文。

试试这个代码

clearForm = (e) => {