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

Question

我创建了一个自定义 <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 错误。有帮助吗？

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"
/>

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

Custom file input component not working - ReactJS

javascript

jsx

reactjs