[英]Custom file input component not working - ReactJS
我創建了一個自定義<FileInput />
組件,它只接受.zip
或.rar
文件。 當我使用本機<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
錯誤也是如此。 有什么幫助嗎?
我終於弄明白了。 我不得不編輯組件以使用本機<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"
/>
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.