所以我想知道我是否可能没有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 以及添加更多字段以使用加号按钮或其他内容进行验证的选项，但即便如此，动态验证将如何工作，因为每个字段都需要正确的识别名称？当前设置来自我正在与之合作的其他开发人员，我只是想解决他分配给我的问题。
谢谢