Question

我创建了一个输入组件，以尝试避免重复引导div / classs。看起来像这样：

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，所以必须添加onBlur，onChange和error。但是必须将它们添加到每个输入中是非常重复的。我试图将它们添加到我的Input组件中，但显然会遇到关于useFormik不存在的错误，而且我有点卡住了。这是添加formik后的输入

          <Input
            name="lastName"
            label="Last Name *"
            type="text"
            value={formik.values.lastName}
            onBlur={formik.handleBlur}
            onChange={formik.handleChange}
            error={formik.touched.lastName && formik.errors.lastName}
          />

我基本上希望能够在输入组件中添加onBlur，onChange和error。

Answer 1

您必须使用Formik包装输入内容，因为它将上下文注入到React树中，然后您就可以在自定义输入组件中使用useField。

如何在输入组件内部使用Formik

1 个答案: