自定义文件输入组件不工作-ReactJS

Question

我创建了一个仅接受.zip或.rar文件的自定义<FileInput />组件。当我使用本机<input type="file" />组件时，它在我的表单中运行良好。但当我制作自定义组件时，却没有响应。我的控制台也不会出现错误。这是我的组件：

const inputRef = useRef();
useEffect(() => {
if (value === "") {
inputRef.current.value = "";
} else {
inputRef.current.files[0].name = value;
}
}, [value]);
//This is the component:
<div
className={`mt-1 flex justify-center px-6 pt-5 pb-6 border-2 border-gray-300 border-dashed rounded-md` + className}
>
<div className="space-y-1 text-center">
<svg
xmlns="http://www.w3.org/2000/svg"
className="h-12 w-12 text-gray-400 mx-auto"
fill="none"
viewBox="0 0 24 24"
stroke="currentColor"
>
<path
strokeLinecap="round"
strokeLinejoin="round"
strokeWidth={1}
d="M9 13h6m-3-3v6m5 5H7a2 2 0 01-2-2V5a2 2 0 012-2h5.586a1 1 0 01.707.293l5.414 5.414a1 1 0 01.293.707V19a2 2 0 01-2 2z"
/>
</svg>
<div className="flex text-sm text-gray-600">
<label htmlFor={name} className="relative cursor-pointer bg-white rounded-md font-medium text-indigo-600 hover:text-indigo-500 focus-within:outline-none focus-within:ring-2 focus-within:ring-offset-2 focus-within:ring-indigo-500"
>
<span>Upload a compressed file</span>
<input id={id} name={name} type="file" value={value} className="sr- 
only" onChange={onChange} accept={accept} ref={inputRef}
/>
</label>
<p className="pl-1">or drag and drop</p>
</div>
<p className="text-xs text-gray-500">
.zip, .rar up to 500MB
</p>
</div>
</div>

这是前端实现：

const handleFiles = (e) => {
setData({...data, [e.target.name]: e.target.files[0]})
}
<div className="col-span-6">
<Label forInput="file_url" value="Upload a zip" />
<FileInput name="file_url" onChange={handleFiles} value={data.file_url}
accept=".zip, .rar" className="mt-1 block w-full rounded-2xl"
/>
</div>

我似乎不明白为什么它不能响应，即使是console错误。有什么帮助吗？

Answer 1

我终于想通了。我只需要编辑组件就可以使用本机<input type="file" />

const FileInput = forwardRef((props, ref) => {
// useEffect(() => {
//     if (value === "") {
//         inputRef.current.value = "";
//     } else {
//         value = inputRef.current.files[0].name;
//     }
// }, [value]);
return (
<div className="flex flex-col items-start">
<div
className={
`mt-1 flex justify-center px-6 pt-5 pb-6 border-2 border-gray-300 border-dashed rounded-md` +
props.className
}
>
<div className="space-y-1 text-center">
<svg
xmlns="http://www.w3.org/2000/svg"
className="h-12 w-12 text-gray-400 mx-auto"
fill="none"
viewBox="0 0 24 24"
stroke="currentColor"
>
<path
strokeLinecap="round"
strokeLinejoin="round"
strokeWidth={1}
d="M9 13h6m-3-3v6m5 5H7a2 2 0 01-2-2V5a2 2 0 012-2h5.586a1 1 0 01.707.293l5.414 5.414a1 1 0 01.293.707V19a2 2 0 01-2 2z"
/>
</svg>
<div className="flex text-sm text-gray-600">
<label className="relative cursor-pointer bg-white rounded-md font-medium text-indigo-600 hover:text-indigo-500 focus-within:outline-none focus-within:ring-2 focus-within:ring-offset-2 focus-within:ring-indigo-500">
<input
{...props}
type="file"
className="mt-3"
ref={ref}
/>
</label>
</div>
<p className="pl-1 text-sm text-gray-500">
or drag and drop
</p>
<p className="text-xs text-gray-500">
.zip, .rar up to 500MB
</p>
</div>
</div>
</div>
);
});
export default FileInput;

然后在前端以这种方式使用：

const inputRef = useRef();
const handleFiles = (e) => {
setData({ ...data, [e.target.name]: e.target.files[0].name });
};
/*In the form */
<FileInput name="file_url" accept=".zip, .rar"
ref={inputRef} onChange={handleFiles}
className="mt-1 block w-full rounded-2xl"
/>