React JS：上传文件选项在自定义按钮上不起作用

Question

 <div cssName="row upload-btn-box">
                                <Button
                                  htmlFor="myInput"
                                  component="span"
                                  className="upload-btn"
                                >
                                    {/* <span> <img src={Upload} alt="Upload Certificate" /> </span> */}
                                   Upload  Certificate
                                                        </Button>
                                    <input
                                    id="myInput"
                                    style={{ display: 'none' }}
                                    type={"file"}
                                    onChange={fileSelectedHandler}
                                />
                            </div>

这是我正在使用的代码，我已经看到许多堆栈溢出但没有任何效果。我在哪里做错了为什么上传文件的对话框没有打开

Answer 1

按钮元素上有一个 htmlFor 属性，而该属性应该用在 label 上。如果您将代码更改为以下它应该可以工作，您可以相应地设置标签样式以显示为按钮。

 <div cssName="row upload-btn-box">
   <label
     htmlFor="myInput"
     className="upload-btn"
   >
       Upload  Certificate
   </label>
   <input
     id="myInput"
     style={{ display: 'none' }}
     type={"file"}
     onChange={fileSelectedHandler}
   />
 </div>