如何将React类选择组件改写为适配react-hook-form的箭头函数组件

基础箭头函数转换版本 #

如果先单独转换原有组件，不接入表单能力，代码如下：

import { useState } from 'react'

const SelectOptions = () => {
  const [fruit, setFruit] = useState('Apple')

  const handleChange = (e) => {
    setFruit(e.target.value)
  }

  const complaint = fruit === 'Strawberry' ? <div>How Are You Doing?</div> : <div></div>

  return (
    <div className='mt-10'>
      SELECT ONE
      <div className='mt-2'>
        <select value={fruit} onChange={handleChange}>
          <option value='apple'>Apple</option>
          <option value='Strawberry'>Strawberry</option>
          <option value='Cucumber'>Cucumber</option>
        </select>
      </div>
      {complaint}
    </div>
  )
}
export default SelectOptions

集成到现有react-hook-form + gatsby-plugin-intl 表单版本 #

不需要单独维护选中状态，直接用react-hook-form提供的register和watchAPI实现，完整表单代码如下：

import { useState } from 'react'
import { useForm } from 'react-hook-form'

const ContactForm = ({ intl }) => {
  const [submitted, setSubmitted] = useState(false)
  const { register, watch, handleSubmit, formState: { errors } } = useForm({
    defaultValues: {
      fruit: 'Apple' // 对应原有默认选中值
    }
  })

  // 监听水果选择值，自动响应变化
  const selectedFruit = watch('fruit')
  // 条件渲染内容
  const complaintField = selectedFruit === 'Strawberry' ? (
    // 可替换为intl格式化后的国际化文本
    <div>{intl.formatMessage({ id: 'form.fruit.strawberry.tip' })}</div>
  ) : null

  const onSubmit = (data) => {
    // 提交逻辑，data中包含fruit字段值
    console.log(data)
    setSubmitted(true)
  }

  return (
    <form onSubmit={handleSubmit(onSubmit)}>
      {/* 其他表单字段 */}
      <div className='mt-10'>
        {/* 国际化替换硬编码文本 */}
        {intl.formatMessage({ id: 'form.fruit.select.label' })}
        <div className='mt-2'>
          <select 
            {...register('fruit', {
              // 可添加校验规则
              required: intl.formatMessage({ id: 'form.fruit.required' })
            })}
          >
            <option value='apple'>{intl.formatMessage({ id: 'form.fruit.apple' })}</option>
            <option value='Strawberry'>{intl.formatMessage({ id: 'form.fruit.strawberry' })}</option>
            <option value='Cucumber'>{intl.formatMessage({ id: 'form.fruit.cucumber' })}</option>
          </select>
          {errors.fruit && <span className="error">{errors.fruit.message}</span>}
        </div>
        {complaintField}
      </div>
      {/* 提交按钮等其他内容 */}
      <button type="submit">{intl.formatMessage({ id: 'form.submit' })}</button>
    </form>
  )
}

export default ContactForm

实现说明 #

• 原有类组件的状态管理逻辑完全替换为react-hook-form的内置能力，无需单独维护fruit状态和onChange事件
• 用watchAPI实时监听fruit字段的选中值，自动触发条件字段的渲染，符合预期的实现思路
• 所有硬编码文本都预留了gatsby-plugin-intl的国际化调用入口，只需要对应配置国际化字典即可
• 保留了原有的表单提交状态submitted，可根据业务需求在提交成功后做对应逻辑处理

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