如何将form.js中TextInput组件的meta变量传递到login.js使用

你可以通过以下两种方式实现需求，优先推荐第一种，更符合Formik的设计逻辑：

方案1：直接在Login组件内调用useField获取目标字段的meta（推荐） #

Formik提供的useField钩子支持在Formik组件包裹范围内的任意子组件调用，只需要传入对应输入框的name属性即可获取该字段的完整meta信息，不需要跨组件传递。
操作步骤：

1. 先确认你要监听错误的输入框对应的name值，例如2FA验证码输入框的name为twoFactorCode
2. 在Login组件内直接调用useField获取对应字段的meta：

const Login = ({ loginUser}) => {
  const history = useHistory();
  const [showPopup, setShowPopup] = useState(false);
  // 新增行：传入目标输入框的name获取对应meta
  const [, twoFactorMeta] = useField('twoFactorCode');

  // 直接使用拿到的meta做判断即可
  useEffect(() => {
    if(twoFactorMeta.error === 'codigo 2 fatores incorreto'){
      setShowPopup(true);
    }
  }, [twoFactorMeta.error])
  // 剩余逻辑...
}

这个方案不需要修改TextInput组件的代码，实现成本最低。

方案2：通过回调props将meta从TextInput传递到父组件 #

如果你有特殊场景必须从TextInput内部抛出meta，可以通过自定义props回调实现：

1. 首先修改TextInput组件，新增onMetaChange回调props，在meta变化时触发：

export const TextInput = ({ icon, onMetaChange, ...props }) => {
  const [field, meta] = useField(props);
  const [showpass, setShowpass] = useState(false);
  const [showPopup, setShowPopup] = useState(false);

  // 新增：meta变化时将值传递给父组件
  useEffect(() => {
    onMetaChange?.(meta);
  }, [meta, onMetaChange])
  // 剩余逻辑...
}

2. 在Login组件使用TextInput的位置传入回调，将meta存储到本地state：

const Login = ({ loginUser}) => {
  const history = useHistory();
  const [showPopup, setShowPopup] = useState(false);
  // 新增state存储子组件传过来的meta
  const [twoFactorMeta, setTwoFactorMeta] = useState({});

  useEffect(() => {
    if(twoFactorMeta.error === 'codigo 2 fatores incorreto'){
      setShowPopup(true);
    }
  }, [twoFactorMeta.error])

  return (
    // 其他代码...
    <Formik {/* 你的formik配置 */}>
      <Form>
        {/* 其他输入框... */}
        {/* 2FA验证码输入框位置传入回调 */}
        <TextInput 
          name="twoFactorCode"
          icon={FiLock}
          label="2FA验证码"
          type="text"
          // 新增回调接收meta
          onMetaChange={meta => setTwoFactorMeta(meta)}
        />
      </Form>
    </Formik>
  )
  // 剩余逻辑...
}

内容的提问来源于stack exchange，提问作者Guilherme Cavenaghi