Question

我正在使用Formik在我的React应用程序中创建表单，并使用自定义组件作为输入，就像这样：

  <Field
    ...
    component={Input}
  />

但是，当我在Formik表单之外使用Input时，出现以下错误：Cannot read property of 'touched' undefined

我的输入看起来像这样：

const Input = React.forwardRef(
  (
    { value, onChange, onKeyPress, placeholder, type, label, form: {touched, errors}, field, ...props },
    ref
  ) => (
      <div style={{ display: "flex", flexDirection: "column" }}>
        {label && (
          <label style={{ fontWeight: 700, marginBottom: `${scale.s2}rem` }}>
            {label}
          </label>
        )}
        <input
          ref={ref}
          style={{
            borderRadius: `${scale.s1}rem`,
            border: `1px solid ${color.lightGrey}`,
            padding: `${scale.s3}rem`,
            marginBottom: `${scale.s3}rem`
          }}
          value={value}
          onChange={onChange}
          onKeyPress={onKeyPress}
          placeholder={placeholder ? placeholder : "Type something..."}
          type={type ? type : "text"}
          {...field}
          {...props}
        />
        {touched[field.name] &&
          errors[field.name] && <div className="error">{errors[field.name]}</div>}
      </div>
    )
)

我不确定为什么touched应该不确定，似乎它是有条件渲染的？

Link to Sandbox

期望的结果：Input应该在Formik的内部和外部都起作用。

我该如何解决？

Answer 1

要使其正常工作，您至少要修改此行

<Input ref={"this.ref"} value={0} form={{}} />

还有这行

{touched && touched[field.name] && errors[field.name] && (

您没有将form和touched作为道具传递给Input组件，因此它们是undefined。您也不会传递Input组件的其他道具。因此，最好检查代码。

无法读取未定义的“触摸”属性

1 个答案: