React hook 表单：如何在 React Hook Form 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 })} />

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

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

Answer 1

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 2

之后你只需要移动onChange道具{...register(...)}

const productImageField = register("productImage", { required: true });

return (
    <input
        className="form-control"
        type="file"
        {...productImageField}
        onChange={(e) => {
          productImageField.onChange(e);
          handleImageUpload(e);
     }}
    />
)

Answer 3

在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 4

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

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