React hook 表单：如何在 React Hook 表单版本 7.0 上使用 onChange

Question

以前我曾经这样写：

<input className="form-control" name="productImage" type='file' onChange={handleImageUpload} ref={register({ required: true })} />

更新后我必须这样写：

<input className="form-control" type="file" {...register('productImage', { required: true })} />

如何在更新版本的 React Hook Form 上使用onChange={handleImageUpload} ？ 这是迁移文档

请原谅我在提问方式上的错误。 我对这些东西很陌生。 谢谢你。

Answer 1

您只需在{...register(...)}之后移动onChange道具

<input
    className="form-control"
    type="file"
    {...register("productImage", { required: true })}
    onChange={handleImageUpload}
/>

您的工作代码框： https://codesandbox.io/s/trusting-shadow-r4k4p

Answer 2

https://github.com/react-hook-form/react-hook-form/releases/tag/v7.16.0

V7.16.0 引入了这个新的 API 用于自定义onChange 。

<input
  type="text"
  {...register('test', {
    onChange: (e) => {},
    onBlur: (e) => {},
  })}
/>

Answer 3

被同样的问题困住了。 对我来说，问题是我的onChange高于 react-hook-form 的{...register}并将其移动到寄存器下方为我解决了问题！

Answer 4

我最近在迁移到 V7 时遇到了类似的问题。 如果它可以帮助任何人。

处理表单的父组件将寄存器 function 向下传递给包装器，包装器将其再次向下传递到需要在更改时去抖动的输入。

我调用了寄存器formLibraryRef以防我以后想使用不同的库，但总的来说我必须做类似的事情：

const { onChange, ...rest } = formLibraryRef(inputName);

将 onChange 传递给 function 本身传递给输入的本机 onChange 事件：

const handleDebouncedChange: (event: React.ChangeEvent<HTMLInputElement>) => void = (
    event: ChangeEvent<HTMLInputElement>,
  ) => {
    onChange(event);
    if (preCallback) {
      preCallback();
    }
    debounceInput(event);
  };

然后将 rest 传递给输入：

<input
  aria-label={inputName}
  name={inputName}
  data-testid={dataTestId}
  className={`form-control ...${classNames}`}
  id={inputId}
  onChange={handleDebouncedChange}
  onFocus={onFocus}
  placeholder={I18n.t(placeholder)}
  {...rest}
/>

此处文档中的register部分： https://react-hook-form.com/migrate-v6-to-v7/提供了有关如何获取 onChange 的更多信息，并显示了Missing ref的示例。

Answer 5

对我来说，装饰解决方案有效

const fieldRegister = register("productImage", {required: true})
const origOnChange = fieldRegister.onChange
fieldRegister.onChange = (e) => {
    const res = origOnChange(e)
    const value = e.target.value
    // do something with value
    return res
}

对于字段声明使用

<input {...fieldRegister}/>

Answer 6

在register文档https://react-hook-form.com/api/useform/register中，样本存在于Custom onChange, onBlur部分：

// onChange got overwrite by register method
<input onChange={handleChange} {...register('test')} />

// register's onChange got overwrite by register method
<input {...register('test')} onChange={handleChange}/>

const firstName = register('firstName', { required: true })
<input 
  onChange={(e) => {
    firstName.onChange(e); // method from hook form register
    handleChange(e); // your method
  }}
  onBlur={firstName.onBlur}
  ref={firstName.ref} 
/>

所以对于你的情况：

const productImageRegister = register("productImage", {required: true})
<input className="form-control"
       type="file"
       {...productImageRegister }
       onChange={e => {
           productImageRegister.onChange(e);
           handleImageUpload(e);
       }} />

Answer 7

您可以使用react-hook-form 控件

  <Controller
  render={({ field }) => <input onChange={event=>{
      handleImageUpload(event);
      field.onChange(event);
    }} />}
  name="image"
  control={control}
/>