Question

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

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

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

发生这种情况是因为您没有将此功能正确绑定到clearForm函数。

Cannot set State of undefined。此错误表示在this.state中，此未定义

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

尝试此代码

clearForm = (e) => {

Answer 2

尝试此代码

<script>
    $(document).ready(function(){
        $('#btnClear').click(function(){                
            if(confirm("Want to clear?")){
                /*Clear all input type="text" box*/
                $('#form1 input[type="text"]').val('');
            }                   
        });
    });
</script>

Answer 3

单击该清除按钮，您可以将表单输入的所有值的状态设置为空字符串。

单击按钮清除表格

3 个答案: