getFieldValue 或 Formik 中的类似工具

IT技术 javascript reactjs formik
2021-05-17 03:24:06

有没有办法在 formik 中获取单击处理程序内的字段值?

你可以setFieldValue在那里使用,所以我假设(但找不到任何地方)Formik 应该有类似的东西来检索值:

<Button onClick={() => getFieldValue('name') === 'Test' ? action1 : action2}

在 Formik 中执行此操作的正确方法是什么?

3个回答

Formikvalues通过props. 想象一下,您有一个输入,以 名称连接到 Formik firstName您可以通过this.props.values.firstName以下方式访问输入的值

<button onClick={() => console.log(this.props.values.firstName)}>
  Log firstName
</button>

我已经测试并验证了。它也在文档的几个地方进行演示

您可以通过 onChange 访问当前的 Formik 值

const [currentValues, setCurrentValues] = useState<UserViewModel>();
...

return (
<>
    <Formik
         initialValues={user}
         onChange={({ nextValues }) => { setCurrentValues(nextValues); }}
    >
    ...
    </Formik>
</>

或使用自定义 React 钩子

import React from 'react';
import { useField } from 'formik';

const FormSpan = ({ name }) => {
    const [field] = useField(name);
    return (
        <span>{field.value}</span>
    );
};

export default FormSpan;

和里面 Formik

<FormSpan name="preTitle" />

您可以通过Formik中的props.values访问您在initalValues 中初始化的字段的值在您的情况下,您想获取 name 字段的值,则可以执行以下操作:

 <Button onClick={() => props.values.name === 'Test' ? action1 : action2}/>

或者

 <Button onPress={() => props.values.name === 'Test' ? action1 : action2}/>