javascript - 如何清除/重置 react.js 表单中的输入数据？

Question

我正在开发一个 React.js 项目。这是一个基于输入案例研究细节的项目。我正在尝试实现一个取消按钮，该按钮将清除输入并将用户恢复到输入详细信息的第一步。

我遇到的问题是，页面恢复到第一步，但输入数据仍然存在。

如图所示，输入详细信息未清除

该项目使用数据处理程序 API，表单由多个组件组成。这是我用于重置输入的当前代码。重置状态不起作用。

  handleDetails = e => {
    e.preventDefault();
    this.props.handleEnterDetails();
    this.setState({clientName: ''})
  };

<Button type = "reset" value = "Reset" onClick={this.handleDetails}>Cancel</Button>

如果这个问题看起来不完整，我深表歉意，这是我的第一个问题，我尝试遵循指南。谢谢！

Answer 1

清除状态应该有工作。这实际上取决于您是否已将输入与状态绑定。可以确切地说，如果您可以共享完整的文件代码。

Answer 2

你只需要从那时clientName起state使用valuefield input

handleDetails = e => {
    e.preventDefault();
    this.props.handleEnterDetails();
    this.setState({clientName: ''})
  };

<input name="yourInputName" onChange={this.YourHandleChangeMethod} value={this.state.clientName} />
<Button type = "button" onClick={this.handleDetails}>Cancel</Button>