在提交時從 react-hook-form 中的 react-select 重置選定的值？

Question

我正在替換我的應用程序中的一些select輸入以使用react-select 。 在使用react-select之前，我使用.reset() function 在提交時清除表單中的選定選項，現在似乎沒有任何影響。

我嘗試在onSubmit function 中存儲一個變量，其中null作為要設置為Controller中的defaultValue屬性的值，認為它會重置。 然而這並沒有奏效。 什么是處理這個問題的干凈方法？

父表單組件：

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;

使用來自react-select 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: "",
};

在useForm const中包含reset方法。

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

在傳遞defaultValues的onSubmit function 中調用reset方法。

reset(defaultValues);

Answer 2

您可以將 onClick onClick={()=> setValue("activitiesbefore", "")}參數與來自 useForm const { register, handleSubmit, errors, reset, control, setValue} = useForm(); 到重置按鈕，或提交按鈕