Formik 在分离成组件后显示验证错误消息

Question

我试图在将表单拆分为差异组件（我的输入框的单独组件）后将 formik 验证添加到我的表单中，因此结构类似于

Parent Ccomponent.js

import Input from "../containers/input";  //this is another component which i am using as a child here 
export default function Signup(props) {
  const {
    handleSubmit,
    handleChange,
    handleBlur,
    values,
    errors,
    touched,
  } = useFormik({
    initialValues: {
      email: ""
    },
    validationSchema,
    onSubmit(values) {
      console.log("executed");
      console.log(values);
    },
  });

  return (
    <React.Fragment>
      <Navbar />
      <form onSubmit={handleSubmit}>
        <div className="container" id="signup">      
              <div className="row">
                <div className="col-lg-12 ">
                  <Input
                    type="text"
                    name="email"
                    placeholder="Email"
                    handleChange={handleChange}
                    handleBlur={handleBlur}
                    touched={touched}
                    errors={errors}
                  />
                </div>               
            </div>
            <div className="row registerButtonDiv">
              <button className="registerButton openSans" type="submit">
                REGISTER
              </button>
            </div>
        
      </form>

    </React.Fragment>
  );
}

所以现在输入组件是我的 child 组件，我已经在这里传递了所有 formik 方法

Input.js

export default function Input(props) {
  return (
    <React.Fragment>
      <div className="inputContainer">
        <input
          type={props.type}
          placeholder={props.placeholder}
          name={props.name}
          className="inputTextBox"
          onChange={props.handleChange}
          onBlur={props.handleBlur}
        />
        <StarIcon />
      </div>
    </React.Fragment>
  );
}

到目前为止一切正常，但是如果我想在输入框下方显示验证错误信息怎么办？？

到目前为止我们做了类似

的事情

 {touched.name && errors.name && <div>{errors.name}</div>}

但现在我正在通过道具获取所有内容我将如何重写这一行，当然我不能将其重写为

{props.touched.props.name && props.errors.props.name&&<div>{props.errors.props.name</div>}

Answer 1

像这样从 parent 制作道具：

onError={touched.email && errors.email}

然后 child 像这样使用它 :

<p>{props.onError}</p>

Formik 在分离成组件后显示验证错误消息

Formik show validation error message after seperating into components

reactjs

formik