我可以在更新后以编程方式更新 React bootstrap <Form.Control> 的值吗？

Question

是否可以在用户编辑后更新 React Bootstrap <Form.Control> 的值？

我在 React 中创建了一个小型 Bootstrap 表单，其中包含四个受控字段。详情如下。提交有效，但我想要一种以编程方式更新各个字段的值的方法，以重置表单并填写一组常见的默认值。

我的代码，其中各种按钮调用 setFormContents，在更新字段之前一直有效。在此之后，更新传递给 <Form.Control> 的 defaultValue 的值。这是有道理的，但我不确定继续进行的首选方式是什么。
变量formContents和setFormContents与<MyForm>的父元素相匹配。

详情

表单的状态和相关的更新函数通过 props

提供

define MyForm(props)
 return <Form
      onSubmit={(e) => {
        e.preventDefault();
        onSubmit(props.formContents);
      }}
    >
      <Form.Group className="mb-3" controlId="field1">
        <Form.Label>Field 1</Form.Label>
        <Form.Control
          defaultValue={props.formContents.val1}
          onChange={({ target: { value } }) =>
            props.setFormContents({ ...props.formContents, val1: value })
          }
        />
      </Form.Group>
      ///... Other <Form.Group>s
</Form>

Answer 1

就我而言，更新适用于所有字段。我的解决方案以为蓝本，是在更新之前重置表单。

创建将存储对 DOM <form> 元素的引用的状态。

    const [formDOM, setFormDOM] = useState(null);

使用<Form>元素的ref=属性来捕获DOM元素。状态的类型为 ?HTMLFormElement

    <Form
      ref={(form) => props.setFormDOM(form)}
     ...
    >

将此 ReactDOM 提供给更新表单的元素。在任何更新之前重置表单。

onClick={(e) => {
  if (props.formDOM != null) {
    props.formDOM.reset();
  }
  props.setFormContents(...);
}}

我可以在更新后以编程方式更新 React bootstrap <Form.Control> 的值吗？

Can I programmatically update the values of React bootstrap <Form.Control> after it's been updated?

reactjs

react-bootstrap

controlled-component

详情