Javascript 如何使用自定义按钮在reactjs中读取和上载文件

我想在本地上传和读取一个文件，但我想使用一个自定义按钮，而不是使用HTML输入

<input type="file" id="my_file_input" />

我找到了这种方法，但我不想使用此形状或此按钮，我想使用材质UI提升按钮来实现此功能，以匹配其他站点按钮

我也尝试了以下方法，但没有成功，因为当我点击按钮时，什么也没发生

<input type="file" id="my_file_input" style={{display:"none"}}/>
<label htmlFor="my_file_input">
    <RaisedButton
        label="Import from Excel"
        labelColor="#FFFFFF"
        backgroundColor="#01579b"
        />
</label>

我想我应该在

RaisedButton

的

onClick

功能中手动执行上传/读取文件功能，但我没有找到这样做的方法

---

那么，react中有没有其他解决此问题的方法？

请阅读react材料的API

从“React”导入React；
从“道具类型”导入道具类型；
从“@material ui/core/styles”导入{withStyles}”；
从“@material ui/core/Button”导入按钮；
常量样式=主题=>({
按钮：{
边距：theme.space.unit，
},
输入：{
显示：“无”，
},
});
功能包含按钮（道具）{
常量{classes}=props；
返回(
上传
);
}
ContainedButtons.propTypes={
类：PropTypes.object.isRequired，
};
导出默认样式（样式）（包含按钮）；

我希望这段代码能对您有所帮助。 我们可以用两种方法来解决这个问题

1-) HTML ONCLICK函数 2-) HTML 反应函数

---

正如文档所说，您只需添加：

component="span"

---

按钮组件。

我想提供一个更新，用于将refs与功能组件一起使用。下面是一个简单的例子：

Import React，{useRef}来自“React”
常量myComponent=（）=>{
const fileInputRef=useRef（）；
常量句柄更改（事件）=（）=>{
//处理事件数据
}
返回(
fileInputRef.current.click（）}>
自定义文件输入按钮
)
}

您可以使用HTML/CSS:@HereticMonkey实现这一点。它在HTML中工作，但在react中不工作。当然可以。解决方案不依赖于JavaScript，React是JavaScript。如果你真的不能让它工作，你的问题应该包括一个，展示你如何实现它以及它如何“不工作”。您可以使用在堆栈溢出上创建一个可运行的代码段。我觉得除了使用标签作为按钮之外，还有更好的方法。我知道有时很难在React中使用语义HTML，这取决于您正在尝试做什么，但最好尽可能使用语义HTML。

<div>
<input type="file" hidden ref={this.inputReference} onChange={this.fileUploadInputChange} />
<button className="ui button" onClick={this.fileUploadAction}>
    Image Upload
</button>
{this.state.fileUploadState}
</div>

constructor(props) {
    super(props);
    this.state={fileUploadState:""}
    this.inputReference = React.createRef();
}

fileUploadAction = () =>this.inputReference.current.click();
fileUploadInputChange = (e) =>this.setState({fileUploadState:e.target.value});

<div>
<input id="fileButton" type="file" hidden />
<button onClick={this.fileUploadButton}>
    Image Upload
</button>
{this.state.fileUploadState}
</div>

this.state = {fileUploadState:""}

fileUploadButton = () => {
document.getElementById('fileButton').click();
document.getElementById('fileButton').onchange = () =>{      
this.setState({
    fileUploadState:document.getElementById('fileButton').value
        });
    }
}

component="span"