javascript - Formik 中的 getFieldValue 或类似内容

Question

有没有办法在formik的点击处理程序中获取字段的值？

你可以setFieldValue在那里使用，所以我假设（但在任何地方都找不到）Formik 应该有类似的东西来检索值：

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

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

Answer 1

Formik 通过将其values对象传递到您的表单中props。想象一下，您有一个输入，连接到名为 的 Formik 中firstName。您可以通过以下方式访问输入的值this.props.values.firstName：

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

我已经对此进行了测试并进行了验证。它还在文档中的多个地方进行了演示。

Answer 2

您可以通过 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" />

Answer 3

您可以通过Formik中的props.values访问您在initalValues中初始化的字段的值。在您的情况下，您想获取名称字段的值，那么您可以执行以下操作：

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

或者

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