javascript - 如何使用自定义按钮在reactjs中读取和上传文件

Question

我想在本地上传和读取文件，但我想使用自定义按钮而不是使用 HTML 输入来执行此操作。

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

我找到了这种方法，但我不想使用这个形状或这个按钮，我想使用一个 Material 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中有没有其他的解决方案呢？

Answer 1

希望这段代码对您有所帮助。我们可以通过两种方式解决它。

1-)

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>

react 构造器

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

点击函数

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

2-)

HTML

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

react 状态

this.state = {fileUploadState:""}

react 函数

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