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

【问题标题】：Resetting form fields to initial state in React在 React 中将表单字段重置为初始状态
【发布时间】：2021-04-13 12:29:23
【问题描述】：

我目前正在制作一个表单（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>
  )
}

使用表单挂钩

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,
  };
};

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

【问题讨论】：

标签： reactjs graphql graphql-js

【解决方案1】：

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

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

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

第二步：然后在你的组件中使用这个函数

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

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

【讨论】：

谢谢你，我不敢相信它这么简单。