如何清除动态反应钩？

Question

我有这个输入钩子：

export const Use_Input_Hook = (initial_value: string) => {
  const [value, set_value] = useState(initial_value);
  return {
    value,
    set_value,
    reset: () => set_value(''),
    bind: {
      value,
      onChange: (e: React.ChangeEvent<HTMLInputElement>) => {
        set_value(e.target.value);
      }
    }
  };
};

我想以这种形式动态使用它，但是如何在提交时重置它？

{['Name', 'Email', 'Age'].map(form_input_key => {
          const { value, bind, reset } = Use_Input_Hook('');
          return (
            <FormGroup row>
              <Label for='exampleEmail' sm={2}>
                {form_input_key}
              </Label>
              <Col sm={10}>
                <Input
                  type='email'
                  name='email'
                  id='exampleEmail'
                  {...bind}
                  placeholder='with a placeholder'
                />
              </Col>
            </FormGroup>
          );
        })}

还是我必须像这样手动进行：

const { value:firstName, bind:bindFirstName, reset:resetFirstName } = Use_Input_Hook('');
  const { value:lastName, bind:bindLastName, reset:resetLastName } = Use_Input_Hook('');

  const handleSubmit = (evt) => {
      evt.preventDefault();
      alert(`Submitting Name ${firstName} ${lastName}`);
      resetFirstName();
      resetLastName();
  }