如何在Formik的点击事件处理程序中获取字段值？

当然可以在Formik的点击事件处理程序里获取字段值！你猜的没错，Formik确实提供了直接取值的方法，而且不止一种，下面是几种常用的正确实现方式：

1. 直接访问values对象（最常用） #

如果你是通过useFormik钩子创建的Formik实例，直接访问实例上的values属性就能拿到对应字段的值，这是最直观的方式：

import { useFormik } from 'formik';

const MyForm = () => {
  const formik = useFormik({
    initialValues: { name: '' },
    onSubmit: (values) => console.log(values),
  });

  const action1 = () => console.log('执行动作1');
  const action2 = () => console.log('执行动作2');

  return (
    <div>
      <input
        name="name"
        value={formik.values.name}
        onChange={formik.handleChange}
        placeholder="输入姓名"
      />
      <button 
        onClick={() => {
          // 直接通过formik.values获取字段值
          formik.values.name === 'Test' ? action1() : action2();
        }}
      >
        点击执行
      </button>
    </div>
  );
};

2. 使用getFieldValue方法 #

你提到的getFieldValue确实是Formik官方提供的方法，它可以直接传入字段名获取对应的值，适合在需要动态指定字段名的场景使用：

<button 
  onClick={() => {
    const nameValue = formik.getFieldValue('name');
    nameValue === 'Test' ? action1() : action2();
  }}
>
  点击执行
</button>

3. 在<Formik>组件的子组件中取值 #

如果你的按钮是嵌套在<Formik>组件内部的子组件，可以通过useFormikContext钩子获取Formik上下文实例，再用values或getFieldValue取值：

import { Formik, Form, useFormikContext } from 'formik';

const SubmitButton = () => {
  const { values, getFieldValue } = useFormikContext();
  const action1 = () => console.log('执行动作1');
  const action2 = () => console.log('执行动作2');

  const handleClick = () => {
    // 两种方式任选其一
    if (values.name === 'Test' || getFieldValue('name') === 'Test') {
      action1();
    } else {
      action2();
    }
  };

  return <button onClick={handleClick}>点击执行</button>;
};

const MyForm = () => {
  return (
    <Formik
      initialValues={{ name: '' }}
      onSubmit={(values) => console.log(values)}
    >
      <Form>
        <input name="name" onChange={(e) => e.target.value} placeholder="输入姓名" />
        <SubmitButton />
      </Form>
    </Formik>
  );
};

需要注意的是，不管用哪种方式，核心都是要先拿到Formik的实例（要么是useFormik返回的对象，要么是useFormikContext获取的上下文），这样才能顺利访问到取值的属性和方法。

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