在提交时从 react-hook-form 中的 react-select 重置选定的值？

Question

I'm in the process of replacing some select inputs in my app to use react-select . Prior to using react-select , I was clearing the selected options in the form on submit using the .reset() function, which does not appear to cause any effect now.

I tried to store a variable in the onSubmit function with null as the value to be set to the defaultValue prop in the Controller thinking it would reset things. However that didn't work. What would be a clean way to handle this?

Parent form component:

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 using Select from 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

Answering my own question based on the example provided by @Bill in the comments in the original post. React-hook-form provides a reset method that takes care of the situation pretty simply.

Create a const to store default values (stored in the parent component in this case).

const defaultValues = {
  activitiesbefore: "",
};

Include reset method in the useForm const .

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

Call the reset method in the onSubmit function passing defaultValues .

reset(defaultValues);

Answer 2

You can pass the onClick onClick={()=> setValue("activitiesbefore", "")} parameter with the setValue value from useForm const { register, handleSubmit, errors, reset, control, setValue} = useForm(); to the reset button, or to the submit button