在 React 中将表单字段重置为初始状态

Question

我目前正在处理一个表格 (Material-UI)，用户填写该表格以记录他们为练习所做的一组。提交后，它将运行一个 GraphQL 突变。由于我也有相似的登录和注册功能，因此我为它们创建了一个表单挂钩。不需要重置登录和注册，因为这是通过将它们重定向到主页来完成的。但是，对于日志集功能，我希望在将表单重置回初始状态后关闭模式（表单所在的位置），以便当他们选择记录另一组时，表单不包含前一个值记录集。

表格

const initialState = {
  exerciseName: "",
  weight: undefined,
  reps: undefined,
  notes: "",
};

function MyModal() {
  const [errors, setErrors] = useState({});

  const { onChange, onSubmit, values } = useForm(registerSet, initialState);

  const [addSet] = useMutation(ADD_SET, {
    update() {
      // need to reset form to initial state here
      handleClose();
    },
    onError(err) {
      setErrors(err.graphQLErrors[0].extensions.exception.errors);
    },
    variables: values,
  });

  function registerSet() {
    addSet();
  }

  return (
    <form
      onSubmit={onSubmit}
      id="addSetForm"
      noValidate
      autoComplete="off"
    >
      <TextField
        name="exerciseName"
        label="Exercise Name"
        select
        value={values.exerciseName}
        error={errors.exerciseName ? true : false}
        onChange={onChange}
      >
        <MenuItem key="Bench Press" value="Bench Press">
          Bench Press
        </MenuItem>

        <MenuItem key="Deadlift" value="Deadlift">
          Deadlift
        </MenuItem>

        <MenuItem key="Squat" value="Squat">
          Squat
        </MenuItem>
      </TextField>

      <Grid container spacing={1}>
        <Grid item xs={6}>
          <TextField
            name="weight"
            label="Weight"
            type="number"
            value={values.weight}
            error={errors.weight ? true : false}
            onChange={onChange}
          />
        </Grid>

        <Grid item xs={6}>
          <TextField
            name="reps"
            label="Reps"
            type="number"
            value={values.reps}
            error={errors.reps ? true : false}
            onChange={onChange}
          />
        </Grid>
      </Grid>

      <TextField
        name="notes"
        label="Notes (Optional)"
        type="text"
        multiline={true}
        rows="4"
        value={values.notes}
        onChange={onChange}
      />
    </form>
  )
}

useForm Hook

export const useForm = (callback, initialState = {}) => {
  const [values, setValues] = useState(initialState);

  const onChange = (event) => {
    setValues({
      ...values,
      [event.target.name]:
        event.target.type === "number"
          ? parseInt(event.target.value)
          : event.target.value,
    });
  };

  const onSubmit = (event) => {
    event.preventDefault();
    callback();
  };

  return {
    onChange,
    onSubmit,
    passwordVisibility,
    confirmPasswordVisibility,
    values,
  };
};

我不确定如何从 useMutation 的 update() 处理程序中的 useForm 挂钩访问 setValues 以将表单重置回其初始状态.

Answer 1

第 1 步：在 useForm 挂钩中创建一个 resetValues() 函数并将其导出

const resetValues = () => {
    setValues(initialState)    
};

return {
    // ... OTHER EXPORTS
    resetValues,
  };

第 2 步：然后在您的组件中使用此函数

  const { onChange, onSubmit, resetValues, values } = useForm(registerSet, initialState);

const [addSet] = useMutation(ADD_SET, {
    update() {
      resetValues(); // SEE HERE
      handleClose();
    },
});

在 React 中将表单字段重置为初始状态

Resetting form fields to initial state in React

reactjs

graphql

graphql-js