Javascript 如何使用按钮重置react表单输入值（与状态关联）？

如何使用按钮重置react表单输入值（与状态关联）

<Form.Group controlId="availabilityOborotDoc">
  <Form.Label>Documents</Form.Label>
  <Form.Control
    type="number"
    name="availabilityOborotDoc"
    required
    readOnly
    value={this.state.settings.availabilityOborotDoc}
  />
  <Link
    to={{
      pathname: `/ost-docs`,
      state: {
        settings: this.state.settings,
        isSelectDoc: true,
        isEdit: isEdit,
        isCreate: isCreate
      }
    }}
  >
    <Button variant="primary" disabled={isView}>
      Choose document
    </Button>
  </Link>
  <Button
    variant="warning"
    disabled={isView}
    onClick={() => {
      this.setState(prevState => ({
        settings: {
          ...prevState.settings,
          availabilityOborotDoc: null
        }
      }));
      this.forceUpdate();
    }}
  >
    Reset
  </Button>
</Form.Group>;

文件
选择文档
{
this.setState（prevState=>({
设置：{
…prevState.settings，
availabilityOborotDoc:空
}
}));
这个.forceUpdate（）；
}}
>
重置
;

---

我实现的重置按钮完全清除状态字段，但没有设置输入中的值。。。（显然它记得上一个）

将状态更新为空字符串，而不是

null

，这样它就可以工作了

查看更多的解释（至少看起来相关？）。我的假设是，因为react将值为

null

的输入视为不受控制，所以它将保留当前值

以下是一个简化的示例：

类示例扩展了React.Component{
建造师（道具）{
超级（道具）；
此.state={
设置：{
可用性OBOROTDOC:'12345'
}
}
}
render（）{
console.log（this.state.settings）
返回(
{
this.setState（prevState=>({
设置：{
…prevState.settings，
可用性oborotdoc:“”
}
}));
}}
>
重置
)
}
}
ReactDOM.render（，document.getElementById（'root'））

为什么要调用
forceUpdate
？状态定义在哪里？我尝试将其作为一种度量方法，但不起作用。。。但什么能起作用？@mmenschig这是一个很长的组件，它只是一个部分。状态始终在构造函数中。谢谢！！！它起作用了！为什么会这样呢？我对我的答案补充了一点。我相信这就是原因，但我无法证明。我只知道react在为输入分配
null
值时会抱怨，所以我认为这是一个很好的问题。