Formik 中的 getFieldValue 或类似内容答案

【问题标题】：getFieldValue or similar in FormikFormik 中的 getFieldValue 或类似内容
【发布时间】：2018-10-31 13:06:51
【问题描述】：

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

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

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

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

【问题讨论】：

标签： javascript reactjs formik

【解决方案1】：

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

【讨论】：

这为我指明了正确的方向，但 onChange 处理程序似乎在 Form 上，而不是 Formik。

【解决方案2】：

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

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

或

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

【讨论】：

【解决方案3】：

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

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

我已经对此进行了测试和验证。它还在the documentation 的多个地方进行了演示。

【讨论】：

@reectrix 上面的运气好吗？
这个问题是，我试图访问的值深深嵌套在 values 数组中，并且字段名称是从属性组合生成的，因为我正在使用的值没有索引，也没有唯一标识符，所以我什至无法找到它。所以，从 values 数组中获取值对我不起作用
比如我有的数据：[{name: Apple, location: US, enabled: true}, {name: Samsung, location: Japan, enabled: false}]，那么我的字段是：appleUSEnabled和samsungJapanEnabled，这是一组复选框。我希望能够调用类似：getFieldValue('appleUSEnabled') 并立即获取值，您可以看到仅使用 values 数组很难做到这一点，而且在计算上，它会非常昂贵
@reectrix 让我们continue this conversation in chat.
Formik 使用name 属性将input 连接到values。如果它在一个数组中，那么您的索引只是另一个点符号路径。您使用相同的名称路径来访问数据。首先，确保您的接线正确。我让this Code Sandbox 帮忙。如果这不能解决您的问题，请考虑构建一个路径队列/数组，该队列/数组累积并记住包括索引号在内的完整路径，以便您以后可以访问该值。（我们可以在聊天室里聊更多。）