我正在尝试创建背景图片更新程序/上传程序组件。
默认设置图像,但是如果用户想要更新背景图像,我想更新状态并存储图像。
到目前为止的研究表明,我需要使用<input type="file" />
元素来启用上传对话框。
还有另一种不使用输入元素的方法吗?如果用户要单击<button>
元素以显示该对话框,然后更新背景图像。
export default class ChangeBackground extends React.Component {
constructor() {
super();
this.state = {
backgroundImage: ''
}
}
handleBackgroundChange() {
let backgroundImage = backgroundImage
this.setState({
backgroundImage: backgroundImage
});
}
render() {
return (
<div className="change-bg-wrap">
<input type="file" accept="image/*" />
<button>
<i className="fa fa-picture-o" style={{fontSize: 20}}></i>
</button>
</div>
)
}
}
答案 0 :(得分:2)
修改了我之前的答案。我修改了一些位以使其适用于我的项目。见下面的代码。
class ChangeBackground extends React.Component {
constructor() {
super();
this.state = {
backgroundImage: 'START'
}
this.handleBackgroundChange = this.handleBackgroundChange.bind(this);
}
handleBackgroundChange(e) {
const reader = new FileReader();
const file = e.target.files[0];
this.setState({
backgroundImage: file.name,
});
}
render() {
return (
<div className="change-bg-wrap">
<input onChange={this.handleBackgroundChange} type="file" accept="image/*" />
file: {this.state.backgroundImage}
<button>
<i className="fa fa-picture-o" style={{fontSize: 20}}></i>
</button>
</div>
)
}
}
我添加了构造函数的最后一行来访问setState。在handleBackgroundChange上,我添加了一个文件阅读器,您可能希望稍后查看,可以通过e.target访问该文件。我在渲染函数上添加了一行,以查看状态是否发生变化。
这适用于我的项目,请告诉我,如果它没有,我可以修改它。
答案 1 :(得分:2)
使用display: "none"
隐藏输入元素,然后执行一些javascript,以便在单击按钮时触发<input>
。
triggerInput = () => {
document.querySelector("input[type='file']").click();
}
<input type="file" accept="image/*" />
<button onClick={this.triggerInput}>
<i className="fa fa-picture-o" style={{fontSize: 20}}></i>
</button>
请参阅https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/click
在var中缓存querySelector
值
编辑:我认为你不能触发反应事件click()
这就是我使用原生js的原因。如果我错了,请纠正我。