Formik

Question

我正在使用 Formik 的 useFormik 挂钩来管理我在 ReactJS 中的表单。但我不知道如何构建一个在 Formik 的 handleChange 函数之上或与其一起工作的自定义 onChange 处理程序。我尝试构建如下所示的自定义更改处理程序，但我无法弄清楚下一步要采取什么步骤。

import React from "react";
import { useFormik } from "formik";

function testForm() {

  const { handleChange, values } = useFormik({
    initialValues: { title: ``, slug: `` },
    onSubmit: ( values ) => console.log( values  )
  })
  
  const customHandleChange = e => {

    // let's suppose title field changed.
    const { value } = e.target;

    // I can do other functions here, like fetching data from API
    store.dispatch( getUserByTitle( value ))

    // But I'm trying to set a custom value for the slug field automatically depending on changing title field value
    let slugValue = value.toLowerCase()
    
    // handleChange function changes the value of title input. How do I also change slug input?
    handleChange(e)
  }

  return (

    <div>

      <input type="text"
             name="Title"
             value={ values.title }
             onChange={ customHandleChange }/>

      <input type="text"
             name="slug"
             value={ values.slug }
             onChange={ handleChange } />
    </div>

  )

}

我试过如下直接设置slug输入的值。

 <input type="text"
        name="slug"
        value={ values.title.toLowerCase() }
        onChange={ handleChange } />

但如果我这样做，我将无法在该字段中键入内容并进行更改，因为该值是严格根据标题输入设置的。用户还应该能够将 slug 字段值更改为他们想要的任何值。

Answer 1

尝试使用 setFieldValue:

function testForm() {
  const { handleChange, values, setFieldValue } = useFormik({
    initialValues: { title: ``, slug: `` },
    onSubmit: ( values ) => console.log( values  )
  })
  
  const customHandleChange = e => {
    const { value } = e.target;

    setFieldValue('title', value);
    setFieldValue('slug', value.toLowerCase());
  }

  return (
    <div>
      <input type="text"
              name="Title"
              value={ values.title }
              onChange={ customHandleChange }/>
      <input type="text"
              name="slug"
              value={ values.slug }
              onChange={ handleChange } />
    </div>
  )
}

Formik - 如何在一个字段更改时自动控制另一个输入字段的值？

Formik - How do I control the value of another input field automatically when one field changes?

reactjs