0

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

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

  • 我的代码（其中各种按钮调用setFormContents）一直有效，直到字段被更新。在此之后，更新传递defaultValue给<Form.Control>. 这是有道理的，但我不确定首选的方法是什么。
  • 变量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>
4

1 回答 1

0

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

  1. 创建一个将存储对 DOM<form>元素的引用的状态。
    const [formDOM, setFormDOM] = useState(null);
  1. 使用元素的ref=属性<Form>来捕获 DOM 元素。状态将有类型?HTMLFormElement
    <Form
      ref={(form) => props.setFormDOM(form)}
     ...
    >
  1. 将此 ReactDOM 提供给更新表单的元素。在任何更新之前重置表单。
onClick={(e) => {
  if (props.formDOM != null) {
    props.formDOM.reset();
  }
  props.setFormContents(...);
}}
于 2022-01-16T00:26:12.153 回答