Reactjs 反应-将Formik功能组件迁移到类组件

我是一个新的反应者，从基于类的组件开始。我最终使用了，并且我在将基于函数的组件转换为基于类的组件时遇到了问题。下面是我试图转换的示例

const MyTextInput = ({ label, ...props }) => {
  // useField() returns [formik.getFieldProps(), formik.getFieldMeta()]
  // which we can spread on <input> and alse replace ErrorMessage entirely.
  const [field, meta] = useField(props);
  return (
    <>
      <label htmlFor={props.id || props.name}>{label}</label>
      <input className="text-input" {...field} {...props} />
      {meta.touched && meta.error ? (
        <div className="error">{meta.error}</div>
      ) : null}
    </>
  );
};

及

React显然不允许在基于类的组件中使用挂钩。感谢您的帮助

---

谢谢。

关于课堂教学方法，你的领域应该是：

类MyTextInput扩展了React.Component{
handleChange=值=>{
const{name，onChange}=this.props；
onChange（名称、值、目标、值）；
};
车把杆=（）=>{
const{name，onBlur}=this.props；
if（onBlur）{
onBlur（name，true）；
}
};
render（）{
const{label，toucted，errors，id，name，value，…attributes}=this.props；
const err=getIn（错误，名称）；
const touch=getIn（touch，name）；
返回(
{label}
{touch&&err？{err}:null}
);
}
}

和

formik

字段：

const SignupForm = () => {
  return (
    <>
      <h1>Subscribe!</h1>
      <Formik
        ...
      >
        {({ setFieldValue, setFieldTouched, values, errors, touched }) => (
          <Form>
            <MyTextInput
              label="First Name"
              name="firstName"
              errors={errors}
              touched={touched}
              value={values.firstName}
              onChange={setFieldValue}
              onBlur={setFieldTouched}
              placeholder="Jane"
            />
            <MyTextInput
              label="Last Name"
              name="lastName"
              type="text"
              placeholder="Doe"
            />
            <MyTextInput
              label="Email Address"
              name="email"
              type="email"
              placeholder="jane@formik.com"
            />
            <button type="submit">Submit</button>
          </Form>
        )}
      </Formik>
    </>
  );
};

const SignupForm=（）=>{
返回(
订阅
{（{setFieldValue，setFieldTouched，Value，errors，touched}）=>(
提交
)}
);
};

我只留下最少的代码来实现类。Check@aturan23在最初的示例中，我看到了

输入的
{…field}
，我在您的代码中没有看到。这在类版本中不是必需的吗？这不是必须的。这可能是唯一正确的方法，但我确实觉得这有点冗长。谢谢
const [field, meta] = useField(props); // Hooks are not allowed in class based components

const SignupForm = () => {
  return (
    <>
      <h1>Subscribe!</h1>
      <Formik
        ...
      >
        {({ setFieldValue, setFieldTouched, values, errors, touched }) => (
          <Form>
            <MyTextInput
              label="First Name"
              name="firstName"
              errors={errors}
              touched={touched}
              value={values.firstName}
              onChange={setFieldValue}
              onBlur={setFieldTouched}
              placeholder="Jane"
            />
            <MyTextInput
              label="Last Name"
              name="lastName"
              type="text"
              placeholder="Doe"
            />
            <MyTextInput
              label="Email Address"
              name="email"
              type="email"
              placeholder="jane@formik.com"
            />
            <button type="submit">Submit</button>
          </Form>
        )}
      </Formik>
    </>
  );
};