如何将react-dropzone与react-hook-form一起使用？

Question

如何将react-dropzone与react-hook-form一起使用，以便表单返回正确的文件-而不仅仅是文件名？

Answer 1

这是来自React-hook-form Github 讨论的作品：

export const DropzoneField = ({
  name,
  multiple,
  ...rest
}) => {
  const { control } = useFormContext()

  return (
    <Controller
      render={({ onChange }) => (
        <Dropzone
          multiple={multiple}
          onChange={e =>
            onChange(multiple ? e.target.files : e.target.files[0])
          }
          {...rest}
        />
      )}
      name={name}
      control={control}
      defaultValue=''
    />
  )
}

const Dropzone = ({
  multiple,
  onChange,
  ...rest
}) => {

  const {
    getRootProps,
    getInputProps,
  } = useDropzone({
    multiple,
    ...rest,
  })

  return (
    <div {...getRootProps()}>
      <input {...getInputProps({ onChange })} />
    </div>
  )
}

您应该查看ControllerAPI，因为它是为了更轻松地与外部控制输入集成而设计的。其中也有不少例子。