使用react hook form和react dropzone时，setValue不起作用

Question

使用react hook form和react dropzone时，表单参数在setValue之后不会更新。

为onDrop设置的setValue没有注册值。

如果setValue的第一个参数是作为适当的字符串输入的，则设置该值，但如果第一个参数为从props(例如，aaaaa(接收的表单的name属性，则设置值。

请让我知道如何解决这个问题。

export default function FileUpload(props:Props){
return (
<Controller
control={props.control}
name={props.name}
render={({ field: { onChange, onBlur,value }}) => (
<Dropzone
noClick
onDrop={(acceptedFiles) => {
console.log(props.setValue);
props.setValue(props.name, acceptedFiles[0]);
}}
>
{({
getRootProps,
getInputProps,
open,
isDragActive,
acceptedFiles,
}) => (
<div>
<div
style={{
borderStyle: 'dashed',
backgroundColor: isDragActive ? `#808080` : 'transparent',
}}
{...getRootProps()}
>
<Input
type={"hidden"}
{...getInputProps({
// type: 'hidden',
// id: 'spreadsheet',
onBlur,
onChange,
})}
/>
<Stack className={"mx-1 mt-1"}>
<PrimaryButton type="button" onClick={open}>
ファイルを選択
</PrimaryButton>
<Typography fontSize={15}>またはドラッグ＆ドロップ</Typography>
<Typography fontSize={15}>{acceptedFiles.length!==0&&acceptedFiles[0].name}</Typography>
</Stack>
</div>
{props.errors && props.name in props.errors && <Typography className={"mt-1.5 ml-3 text-xs"} color={'#d32f2f'}>{props.errors && props.errors[props.name]?.message}</Typography>}
</div>
)}
</Dropzone>
)}
/>
);
}

Answer 1

我认为您可以使用来自控制器道具的onChange函数。

onDrop={(acceptedFiles) => onChange(acceptedFiles[0])