提交时重置 react-hook-form 内 react-select 的选定值？

Question

我正在替换我的应用程序中的一些 select 输入以使用 react-select。在使用 react-select 之前，我在提交时使用 .reset() 函数清除了表单中的选定选项，现在似乎没有任何影响。

我试图在 onSubmit 函数中存储一个变量，其中 null 作为要设置为 Controller 中的 defaultValue prop 的值，认为它会重置事物。但是那没有用。什么是处理此问题的干净方法？

Parent 表单组件：

function AddActivityForm(props) {

  const { register, handleSubmit, control, watch, errors } = useForm();

  const onSubmit = (data) => {
    //Additional logic here
    document.getElementById("activity-entry-form").reset();
  };

  return (
    <Form id="activity-entry-form" onSubmit={handleSubmit(onSubmit)}>
          <ActivityPredecessorInput
            activities={props.activities}
            formCont={control}
          />
      <Button variant="primary" type="submit" className="mb-2">
        Submit
      </Button>
    </Form>
  );
}

export default AddActivityForm;

Child 使用 Select 来自 react-select:

function ActivityPredecessorInput(props) {
  const activities = props.activities;
  const options = activities.map((activity, index) => ({
    key: index,
    value: activity.itemname,
    label: activity.itemname,
  }));
  return (
    <Form.Group controlId="" className="mx-2">
      <Form.Label>Activities Before</Form.Label>
      <Controller
        as={
          <Select
            isMulti
            options={options}
            className="basic-multi-select"
            classNamePrefix="select"
          />
        }
        control={props.formCont}
        name="activitiesbefore"
        defaultValue={""}
      />
    </Form.Group>
  );
}

export default ActivityPredecessorInput;

Answer 1

根据example provided by @Bill in the comments in the original post. React-hook-form provides a reset method回答我自己的问题，这很简单。

创建一个const来存储默认值（在本例中存储在父组件中）。

const defaultValues = {
  activitiesbefore: "",
};

在 useForm const 中包含 reset 方法。

const { register, handleSubmit, reset, control, watch, errors } = useForm();

在传递defaultValues的onSubmit函数中调用reset方法。

reset(defaultValues);

Answer 2

你可以通过onClick onClick={()=> setValue("activitiesbefore", "")} 具有 useForm 的 setValue 值的参数 const { register, handleSubmit, errors, reset, control, setValue} = useForm(); 到重置按钮，或到提交按钮

提交时重置 react-hook-form 内 react-select 的选定值？

Reset selected values from react-select within react-hook-form on submit?

reactjs

react-select

react-hook-form