Reactjs 如何在输入组件中使用Formik

我创建了一个输入组件，试图避免引导div/类的重复。看起来是这样的：

import React from "react";
import "./Input.css";

const Input = ({ name, label, error, ...rest }) => {
  return (
    <div className="form-group">
      <label htmlFor={name}>{label}</label>
      <input
        {...rest}
        id={name}
        name={name}
        className="form-control form-control-lg"
      ></input>
      {error && <span className="input-error">{error}</span>}
    </div>
  );
};

export default Input;

<Input name="lastName label="Last Name" type="text" />

从“React”导入React；
导入“/Input.css”；
常量输入=（{name，label，error，…rest}）=>{
返回(
{label}
{error&&{error}
);
};
导出默认输入；

然后在表格上，我这样称呼它：

import React from "react";
import "./Input.css";

const Input = ({ name, label, error, ...rest }) => {
  return (
    <div className="form-group">
      <label htmlFor={name}>{label}</label>
      <input
        {...rest}
        id={name}
        name={name}
        className="form-control form-control-lg"
      ></input>
      {error && <span className="input-error">{error}</span>}
    </div>
  );
};

export default Input;

<Input name="lastName label="Last Name" type="text" />

---

您必须用Formik包装您的输入，因为它将上下文注入反应树，然后您将能够在自定义输入组件中使用
useField