繁体   English   中英

如何在 Formik forms 上使用动作?

[英]How to use actions on Formik forms?

我想在每次提交表单时重置我的 Formik 表单。 而不是submitForm(email); 我正在尝试submitForm(actions, email)以便我可以打电话

actions.resetForm()

submitForm()内,但我得到Cannot find name 'actions'.ts(2304)

 let submitForm = (email: string) => {
    setIsSubmitted(true);
    removeUser({
      variables: {
        email: email,
      },
    })
      .then(({ data }: ExecutionResult<DeleteUserResponse>) => {
          setIsRemoved(true);
      })
      .catch((error: { message: string }) => {
        setIsRemoved(false);
      });
  };

  return (
    <div>
      <Formik
        initialValues={{ email: '' }}
        onSubmit={(values, actions) => {
          setTimeout(() => {
            alert(JSON.stringify(values, null, 2));
            actions.setSubmitting(false);
          }, 1000);
        }}
        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 className="main-content">
              <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')}
                  />
                  <br></br>
                  <CustomButton
                    disabled={!isValid || !email}
                    text={'Remove User'}
                  />
                </div>
              </form>
            </div>
          );
        }}
      </Formik>
    </div>
  );

或者,如果有更简单的方法来重置文本字段,那也很好。

改变

onSubmit={e => {
    e.preventDefault();
    submitForm(email);
    }}>

  onSubmit={e => {
        e.stopPropagation()
          handleSubmit(e)
        }}>

添加handleSubmit事件

const {
            values: { email },
            errors,
            touched,
            handleChange,
            isValid,
            setFieldTouched,
             handleSubmit        <-- this
          } = props;

在 onSubmit

onSubmit={(values, actions) => 

添加function

submitForm(values.email);

注意:onsubmit 是<Formik onSubmit={...的一个属性,您可以获取此 function 上的所有值,而不是从<form onSubmit

  <Formik
    initialValues={{ email: '' }}
    onSubmit={(values, actions) => {
      setTimeout(() => {
        alert(JSON.stringify(values, null, 2));
        actions.setSubmitting(false);
      }, 1000);
        **actions.resetForm();**
    }}
        
  

暂无
暂无

声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.

 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM