服务器端的表单验证。如何以表格形式显示验证消息? (反应/福尔摩克/安特)

时间:2020-07-29 14:10:19

标签: javascript reactjs antd formik

例如仅包含电子邮件字段的表单:

const RegistrationForm = (props) => {
  const { values, touched, errors, handleChange, handleBlur, handleSubmit, status } = props;

  const emailFieldHelp = () => {
     const { touched, errors, status, setStatus } = props;
     console.log('status: ', status);
     if (touched.email && errors.email) {
       return errors.email;
     }

     if (status && !status.isUserAdded) {
       setStatus({"isUserAdded": false});
       return "User already exist";
     }
     return null;
   };

  return (
    <Form onFinish={handleSubmit}>
    <Form.Item
          help={emailFieldHelp()}
          validateStatus={setFieldValidateStatus('email')}
          label="E-mail"
          name="email"
          hasFeedback={touched.email && values.email !== ''}
        >
         <Input
           placeholder="Email"
           value={values.email}
           onChange={handleChange}
           onBlur={handleBlur}
         />
        </Form.Item>
        <Form.Item>
          <Button type="primary" htmlType="submit">Submit</Button>
        </Form.Item>
        </Form>
  )
};
const RegFormView = withFormik({
  validationSchema,
  mapPropsToValues: () => ({
    email: ''
  }),

  handleSubmit: async (values, { setErrors, setSubmitting, setStatus }) => {
    await userService.createUser('/signup/', values)
        .then(response => {
          setStatus('');
          const status = (response.isAdded)
              ? {isUserAdded: true}
              : {isUserAdded: false};
          setStatus(status);
          setSubmitting(false);
          }, (error) => {
            setErrors(error);
         });
     },
})(RegistrationForm);

当我发送表格并在服务器端对其进行验证时,我将返回“ i☎联系人” =假或真。比我将状态设置为{isUserAdded:true}或false(如果未添加用户)。而且我绝对不知道如何在电子邮件字段下的表单中显示此消息并保持表单正常运行。现在,我可以显示消息,但是由于状态已设置为{isUserAdded:true},所以我无法第二次发送表单。用户更改电子邮件字段时,我需要某种方式更改状态吗?但由于格式问题,我无法做到这一点。

这里onChange={handleChange}我只能传递handleChange,不能运行我的函数,也可以像这样onChange={myFunc()}来运行我的函数,但是似乎无法将handleChange传递给Formik。 (我不需要像这样的handleChange(e)那样调用它,它不起作用!我需要以某种方式将其传递给Formik)。如果您有对react plz帮助的了解。

如果您知道一些示例,该示例如何以react形式显示服务器端验证消息,则指向此示例的链接可能会有所帮助。 ty。

0 个答案:

没有答案