Question

我有一个反应形式，当单击按钮时会调用graphql突变。单击按钮并完成变异后，表单中的文本仍然存在。因此，为了进行新的变异，用户将必须手动删除在文本字段中编写的文本。

提交表格后，有什么方法可以自动重置文本字段吗？

export default function RemoveUserPage() {
  const [isSubmitted, setIsSubmitted] = useState(false);
  const [isRemoved, setIsRemoved] = useState(false);
  const [errorMessage, setErrorMessage] = useState('');

  const [removeUser] = useMutation<DeleteUserReponse>(REMOVE_USER);

  let submitForm = (email: string) => {
    setIsSubmitted(true);
    removeUser({
      variables: {
        email: email,
      },
    })
      .then(({ data }: ExecutionResult<DeleteUserReponse>) => {
        if (data !== null && data !== undefined){
        setIsRemoved(true);
      }})
      .catch((error: { message: string }) => {
        setIsRemoved(false);
        setErrorMessage(error.message);
      });
  };

  const initialValues={ email: '' }
  return (
    <div>
      <PermanentDrawerLeft></PermanentDrawerLeft>
      <Formik
        //initialValues={{ email: '' }}
        initialValues={initialValues}
        onSubmit={(values, actions) => {
          setTimeout(() => {
            alert(JSON.stringify(values, null, 2));
            actions.setSubmitting(false);
          }, 1000);
          initialValues={initialValues}
        }}
        validationSchema={schema}>
        {props => {
          const {
            values: { email },
            errors,
            touched,
            handleChange,
            isValid,
            setFieldTouched,
          } = props;
          const change = (name: string, e: FormEvent) => {
            e.persist();
            handleChange(e);
            setFieldTouched(name, true, false);
          };
          return (
            <div>
              <form
                style={{ width: '100%' }}
                onSubmit={e => {
                  e.preventDefault();
                  submitForm(email);
                }}>
                <div>
                  <TextField
                    variant="outlined"
                    margin="normal"
                    id="email"
                    name="email"
                    helperText={touched.email ? errors.email : ''}
                    error={touched.email && Boolean(errors.email)}
                    label="Email"
                    value={email}
                    onChange={change.bind(null, 'email')}
                  />
                  <CustomButton
                    disabled={!isValid || !email}
                    text={'Remove User'}
                  />
                </div>
              </form>
              {isSubmitted && StatusMessage(isRemoved, errorMessage)}
            </div>
          );
        }}
      </Formik>
    </div>
  );
}

Answer 1

尝试重用您的初始状态，如下所示：

const INITIAL_STATE = { email: '' };

export default function RemoveUserPage() {
  const [isSubmitted, setIsSubmitted] = useState(false);
  const [isRemoved, setIsRemoved] = useState(false);
  const [errorMessage, setErrorMessage] = useState('');

  const [removeUser] = useMutation<DeleteUserReponse>(REMOVE_USER);

  let submitForm = (email: string) => {
    setIsSubmitted(true);
    removeUser({
      variables: {
        email: email,
      },
    })
      .then(({ data }: ExecutionResult<DeleteUserReponse>) => {
        if (data !== null && data !== undefined){
        setIsRemoved(true);
      }})
      .catch((error: { message: string }) => {
        setIsRemoved(false);
        setErrorMessage(error.message);
      });
  };

  return (
    <div>
      <PermanentDrawerLeft></PermanentDrawerLeft>
      <Formik
        initialValues={{ ...INITIAL_STATE }}
        onSubmit={(values, actions) => {
          setTimeout(() => {
            alert(JSON.stringify(values, null, 2));
            actions.setSubmitting(false);
          }, 1000);
          actions.setValues({ ...INITIAL_STATE });
        }}
        validationSchema={schema}>
        {props => {
          const {
            values: { email },
            errors,
            touched,
            handleChange,
            isValid,
            setFieldTouched,
          } = props;
          const change = (name: string, e: FormEvent) => {
            e.persist();
            handleChange(e);
            setFieldTouched(name, true, false);
          };
          return (
            <div>
              <form
                style={{ width: '100%' }}
                onSubmit={e => {
                  e.preventDefault();
                  submitForm(email);
                }}>
                <div>
                  <TextField
                    variant="outlined"
                    margin="normal"
                    id="email"
                    name="email"
                    helperText={touched.email ? errors.email : ''}
                    error={touched.email && Boolean(errors.email)}
                    label="Email"
                    value={email}
                    onChange={change.bind(null, 'email')}
                  />
                  <CustomButton
                    disabled={!isValid || !email}
                    text={'Remove User'}
                  />
                </div>
              </form>
              {isSubmitted && StatusMessage(isRemoved, errorMessage)}
            </div>
          );
        }}
      </Formik>
    </div>
  );
}

尽管我也看到了resetForm的第二个参数的onSubmit方法，但是还没有测试它的工作方式，所以您也可以尝试一下。

提交后重置表格

1 个答案: