reactjs - 渲染后如何在formik中触发验证？

Question

我有一个关于 formik 的问题。基本上，我将有一个表格，其中列出了有错误的表单的所有 Id。当用户单击表单的 Id 时，它将显示表单本身。要求是在呈现表单时也应该显示错误。有谁知道如何用 Formik 做到这一点？此外，如果用户编辑该字段，则字段验证应正常工作。

我把代码和盒子链接放在这里。 https://codesandbox.io/s/pensive-brattain-yyls2 .基本上我希望当表单出现时我应该看到错误，而不仅仅是当用户离开该字段或更改它时。谢谢你。

import { Formik, Field, Form } from "formik";
import { TextField } from "formik-material-ui";

class Post0 extends React.Component {
   validateEmptyName(value) {
      if (!value) {
        return "Invalid Name";
      }
   }

 render() {
  return (
  <div>
    <Formik
      initialValues={{
        email: "",
        animal: ""
      }}
      onSubmit={values => {
        this.props.nextStep(values);
      }}
      render={({ values, isSubmitting }) => (
        <Form>
          <Field
            name="email"
            type="email"
            value={values.email}
            component={TextField}
            variant="outlined"
            validate={this.validateEmptyName}
          />
          <Field
            name="animal"
            value={values.animal}
            component={TextField}
            variant="outlined"
          />

          <button type="submit">Submit</button>
        </Form>
      )}
    />
  </div>
);

}
}

Answer 1

我做了一个 basic demo使用自定义输入组件的版本。 Formik 没有内置选项来执行此操作，因此不幸的是，您需要创建自己的字段组件以与 Formik 的 Prop 集成并绕过如果未触及表单则不会显示验证的逻辑。

const Input = ({ field, form }) => {
  useEffect(() => {
    form.validateForm();
  }, []);

  return (
    <div>
      <input
        style={{
          border: form.errors[field.name] ? "1px solid red" : "1px solid #ccc"
        }}
        name={field.name}
        value={field.value}
        onChange={field.onChange}
      />
      {form.errors[field.name] && (
        <span style={{ color: "red" }}>{form.errors[field.name]}</span>
      )}
    </div>
  );
};

然后将其作为 component 传递支撑您的 <Field/> .

Formik 确实提供了一个 isInitialValid你可以设置为 false 的 Prop 在主要 Formik 组件上，但是如果没有 touched，您正在使用的库 TextFields 将不会显示任何内容。支柱。