如何将Formik表单值存入useState状态变量

分两种场景实现需求：

场景1：在Formik组件内部同步值到useState #

直接给Form.Select的onChange事件包一层逻辑，先执行Formik默认的handleChange保证表单状态正常更新，再将选中值赋值给你自己的useState变量即可：

// 你自己定义的useState变量
const [selectedAsset, setSelectedAsset] = useState('')

// 原Form.Select部分仅修改onChange配置即可
<Form.Group className="mb-3" controlId="asset">
  <Form.Label>Select Asset</Form.Label>
  <Form.Select
    aria-label="Deslect asser to buy"
    name="asset"
    onChange={(e) => {
      // 先调用Formik默认的更新逻辑，保证表单状态正常
      handleChange(e)
      // 同步选中值到你自己的useState
      setSelectedAsset(e.target.value)
    }}
    onBlur={handleBlur}
    value={values.asset}
  >
    <option value=""></option>
    <option value="bitcoin">Bitcoin</option>
    <option value="ethereum">Ethereum</option>
    <option value="binancecoin">Binance Coin</option>
    <option value="tether">Tether </option>
    <option value="solana">Solana </option>
    <option value="binancecoin">Cardano</option>
    <option value="ripple">Ripple</option>
    <option value="polkadot">Polkadot</option>
    <option value="dogecoin">Dogecoin </option>
    <option value="avalanche-2">Avalanche</option>
  </Form.Select>
  {touched.asset && errors.asset ? (
    <div className="error">{errors.asset}</div>
  ) : null}
</Form.Group>

场景2：在Formik组件外部访问表单值 #

如果需要在<Formik>标签的外部（比如同级节点、父组件）获取表单值，可以用下面两种方法：

• 方法1：用useFormik钩子创建表单实例
  不用<Formik>组件包裹的写法，直接通过钩子创建表单实例，实例本身就携带所有表单状态，随时随地可以访问：

  const [selectedAsset, setSelectedAsset] = useState('')
  // 初始化formik实例
  const formik = useFormik({
    initialValues: {
      asset: ''
    },
    // 你的校验规则、提交逻辑照常写即可
    validationSchema: YourValidationSchema,
    onSubmit: (values) => {
      // 原有提交逻辑
    }
  })
  
  // 监听asset字段变化，同步到你的useState
  useEffect(() => {
    setSelectedAsset(formik.values.asset)
  }, [formik.values.asset])
  
  // 表单部分绑定formik实例即可
  return (
    <form onSubmit={formik.handleSubmit}>
      <Form.Group className="mb-3" controlId="asset">
        <Form.Label>Select Asset</Form.Label>
        <Form.Select
          aria-label="Deslect asser to buy"
          name="asset"
          onChange={formik.handleChange}
          onBlur={formik.handleBlur}
          value={formik.values.asset}
        >
          {/* 选项部分和原来完全一致 */}
        </Form.Select>
      </Form.Group>
    </form>
  )
  

• 方法2：用ref获取<Formik>组件实例
  如果依然想用<Formik>组件的写法，给组件加ref即可获取内部实例：

  const formikRef = useRef(null)
  const [selectedAsset, setSelectedAsset] = useState('')
  
  // 监听值变化同步到useState
  useEffect(() => {
    if (formikRef.current) {
      setSelectedAsset(formikRef.current.values.asset)
    }
  }, [formikRef.current?.values.asset])
  
  return (
    <>
      <Formik
        ref={formikRef}
        initialValues={{asset: ''}}
        onSubmit={yourSubmitFunction}
      >
        {/* 原有表单内容完全不用修改 */}
      </Formik>
      {/* 外部任意位置都可以通过formikRef.current.values访问所有表单值 */}
    </>
  )
  

注意事项 #

不要对Formik的values和你自己的useState做双向绑定，容易触发无限更新；如果没有特殊逻辑需要，优先直接使用Formik自带的values即可，不需要额外维护一份state。

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