如何设置Error React Hook表单和React dropzone

Question

我正在做一个React hook表单项目，我正在使用React dropzone上传一些图像，当文件类型不是图像时，我想显示React hook表单的ERROR，我可以console.log ERROR，但在接受文件格式之前，我不知道如何使用SetError和块表单子选项。。

这是我的沙盒代码

你知道吗？

Answer 1

阻止表单提交的最简单方法是在fileRejections数组的长度大于零时使用input的disabled属性：

<input type="submit" disabled={fileRejections.length > 0}/>

整个表单代码为：

<form onSubmit={handleSubmit(onSubmit)}>
<section className="container">
<div {...getRootProps({ className: "dropzone" })}>
<input {...getInputProps()} name="upload" />
<p>Drag 'n' drop some files here, or click to select files</p>
<em>(Only *.jpeg and *.png images will be accepted)</em>
</div>
<aside>
<h4>Accepted files</h4>
<ul>{acceptedFileItems}</ul>
<h4>Rejected files</h4>
<ul>{fileRejectionItems}</ul>
</aside>
</section>
<input type="submit" disabled={fileRejections.length > 0}/>
</form>