React Hook Form中的onChange输入事件

Question

我正在使用React和react-hook-form库构建web应用程序。 我想创建一个表单，在该表单中，某些字段的更改会触发某些事件。 因此，我需要传递自定义onChange。

但是，自从版本7.0以后，我无法使用onChange，因为register使用了它自己的onChange。

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

const MyForm = () => {

  const form = useForm()
  const onChangeFirst = value => console.log('First:', value)
  const onChangeSecond = value => console.log('Second:', value)

  return (
    <form onSubmit={form.handleSubmit(vals => null)}>
      <input {...register('first')} />
      <input {...register('second')} />
    </form> 
  )

}

我如何将onChangeFirst传递给first输入，将onChangeSecond传递给second输入？

- Michal

Answer 1

改变输入时触发onChange的两种方法。

1/ 使用Controller组件（推荐）

const onChangeFirst = value => console.log('First:', value)

<Controller
  control={control}
  name="first"
  render={({field}) => (
    <input {...field} onChange={e => {
      onChangeFirst(field.value);
      field.onChange(e);
    }} />
  )}
/>

2/ 使用 useWatch 钩子

 const second = useWatch({
    control,
    name: 'second'
 });

 useEffect(() => {
   console.log('Second:', second)
 }, [second])

- Nghiệp

Answer 2

使用watch：

const { register, watch } = useForm()
const first = watch("first")

useEffect(() => {
    // do something with first
}, [first])

…

<input {...register('first')} />

- hansaplast

Answer 3

根据文档，这个功能是有效的。

import React from "react";
import {useForm} from "react-hook-form";

const MyForm = () => {
    const form = useForm();

    return <form onSubmit={form.handleSubmit(values => console.log(values))}>
        <input {...form.register('first', {onChange: e => console.log(e.target.value)})}/>
        <input {...form.register('second', {onChange: e => console.log(e.target.value)})}/>
    </form>
}

在我看到上面的解决方案之前，我发布了这个不使用控制器组件的解决方案（我将它保留在这里，因为它包含了对某人可能有用的信息）。

import React, {forwardRef} from "react";
import {FormProvider, useForm, useFormContext} from "react-hook-form";

const Input = forwardRef({itemKey, handleChange, ...rest}), ref => {
    const {register} = useFormContext();
    const reg = register(itemKey);
    const handleChangeWrapped = e => {
        reg.onChange(e);
        handleChange?.(e.target.value);
    }

    return <input ref={ref} {...rest} {...reg} onChange={handleChangeWrapped}/>
});

const MyForm = () => {
    const form = useForm();

    return <FormProvider {...form}>
        <form onSubmit={form.handleSubmit(values => console.log(values))}>
            <Input itemKey={'first'} handleChange={value => console.log(value)}/>
            <Input itemKey={'second'} handleChange={value => console.log(value)}/>
        </form>
    </FormProvider>
}

- shlgug