在提交时，在react-hook-form中重设react-select的选择值？

Question

我正在更换一些列的 select 在我的应用程序中使用的输入 react-select. 在使用之前 react-select在提交时，我在表单中使用的是清除所选的选项。.reset() 函数，但现在看来没有造成任何影响。

我试着将一个变量存储在 onSubmit 功能与 null 作为要设置的值。defaultValue 档次 Controller 以为这样就能重设。然而这并不奏效。有什么干净的方法可以处理这个问题？

父表单组件。

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;

父表单组件： 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

根据我自己的问题回答 例子 由 @Bill 在原帖评论中提供。React-hook-form提供了一个 重置方法 可以很简单地解决这个问题。

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

const defaultValues = {
  activitiesbefore: "",
};

包括 reset 中的方法 useForm const.

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

呼叫 reset 中的方法 onSubmit 函数传递 defaultValues.

reset(defaultValues);