0

所以我想知道我是否可能没有formik正确使用并且我对它可以做什么的期望是不正确的。基本上我有一个表格，我想在某些字段上验证，一切都很好，直到我需要验证一个TextField多行的。我有两种解决这个问题的方法，但如果可能的话，需要一些指导。我将提供代码示例。

const validateCompetitors = (values, props) => {
    const errors = {};
    let errorIndex = [];
    const competitors = values && values.split('\n');

    if (!competitors) {
      errors.competitors = 'Enter competitor urls please';
    } else {
      competitors.map((url, idx) => {
        if (!/^((https?|ftp):\/\/)?(www.)?(((([a-z]|\d|-|\.|_|~|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])|(%[\da-f]{2})|[!\$&'\(\)\*\+,;=]|:)*@)?(((\d|[1-9]\d|1\d\d|2[0-4]\d|25[0-5])\.(\d|[1-9]\d|1\d\d|2[0-4]\d|25[0-5])\.(\d|[1-9]\d|1\d\d|2[0-4]\d|25[0-5])\.(\d|[1-9]\d|1\d\d|2[0-4]\d|25[0-5]))|((([a-z]|\d|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])|(([a-z]|\d|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])([a-z]|\d|-|\.|_|~|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])*([a-z]|\d|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])))\.)+(([a-z]|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])|(([a-z]|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])([a-z]|\d|-|\.|_|~|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])*([a-z]|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])))\.?)(:\d*)?)(\/((([a-z]|\d|-|\.|_|~|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])|(%[\da-f]{2})|[!\$&'\(\)\*\+,;=]|:|@)+(\/(([a-z]|\d|-|\.|_|~|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])|(%[\da-f]{2})|[!\$&'\(\)\*\+,;=]|:|@)*)*)?)?(\?((([a-z]|\d|-|\.|_|~|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])|(%[\da-f]{2})|[!\$&'\(\)\*\+,;=]|:|@)|[\uE000-\uF8FF]|\/|\?)*)?(\#((([a-z]|\d|-|\.|_|~|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])|(%[\da-f]{2})|[!\$&'\(\)\*\+,;=]|:|@)|\/|\?)*)?$/i
          .test(url)) {
          errorIndex = [...errorIndex, idx + 1];
          errors.competitors = `Provided url is incorrectly formated on line(s) ${errorIndex.map((error) => `${error}`)}`;
        }
      });
    }
    return errors;
  };
       <Formik
          validateOnBlur={false}
          validateOnChange={false}
          initialValues={{
             competitors: ''
           }}
           onSubmit={(values, {errors}) => console.log(values, errors)}
           >
          {({

            errors,
            values
          }) => (
            <Form
              noValidate
              onSubmit={handleSubmit}
            >
               <TextField
                  name="competitors"
                  error={errors.competitors}
                  value={values.competitors}
                  multiline
          onKeyPress={(e) => e.key === 'Enter' && validateCompetitors(values.competitors)}
                  error={errors.competitors}
              value={values.competitors}
                />
                <Button
                  variant="contained"
                  fullWidth
                  type="submit"
                  to="#"
                >
                  Add website
                </Button>
              </Box>
            </Form>
          )}
       </Formik>

我目前正在按 enter 进行验证TextFeild。我也尝试过各种方式，基本上都是在 formiks 文档上，但仍然无法验证。validateCompetitors确实返回一个带有 的对象errors.competitors。我可能正在考虑用单个 TextField 替换多行 TextField 以及添加更多字段以使用加号按钮或其他内容进行验证的选项，但即便如此，动态验证将如何工作，因为每个字段都需要正确的识别名称？当前设置来自我正在与之合作的其他开发人员，我只是想解决他分配给我的问题。

谢谢

4

1 回答 1

0

尝试将您的 Textfield 替换为 Field ex ：

 <Field  component='textarea'
                  name="competitors"
                  error={errors.competitors}
                  value={values.competitors}
                  onChange={handleChange}
                  onBlur={handleBlur}
                  onKeyPress={(e) => e.key === 'Enter' && validateCompetitors(values.competitors)}
                  error={errors.competitors}
                  value={values.competitors}
                />
于 2021-03-09T13:40:53.660 回答