我可以以编程方式更新 React bootstrap 的值吗<form.control>更新后？</form.control>

Question

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

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

• 我的代码（其中各种按钮调用setFormContents ）一直有效，直到字段被更新。 在此之后，更新传递给<Form.Control>的defaultValue的值。 这是有道理的，但我不确定首选的方法是什么。
• 变量formContents和setFormContents与<MyForm>的父元素分类。

细节

表单的 state 和相关的更新 function 是通过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

就我而言，更新适用于所有领域。 我的解决方案是以StackOverflow 响应为模型的，它是在更新表单之前重置表单。

1. 创建一个 state 将存储对 DOM <form>元素的引用。

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

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

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

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

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

Answer 2

您还可以使用useRef()以编程方式访问您的From.Control ：

const inputRef = useRef(null);

[...]

<Form.Control
     ref={inputRef}
     defaultValue={props.formContents.val1}
     onChange={({ target: { value } }) =>
       props.setFormContents({ ...props.formContents, val1: value })
     }
 />

然后访问该值：

inputRef.current.value = someValue;

在您的情况下，在您的onClick function 中：

onClick={(e) => {
     ...
     inputRef.current.value = "";    
}

这种方法不太简洁，因为您必须在每个字段上执行此操作，但允许独立控制每个 From.Control 的内容。