单击按钮清除表格

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

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