Question

我正在使用Formik的useFormik钩子在ReactJS中管理表单。但是我不知道如何构建自定义的onChange处理程序，该处理程序可以在Formik的handleChange函数的上方或旁边工作。我尝试构建如下所示的自定义更改处理程序，但无法确定下一步该怎么做。

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>

  )

}

我尝试如下直接设置子弹输入的值。

 <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-当一个字段更改时，如何自动控制另一个输入字段的值？

1 个答案: