javascript - React JS 图像 uploader |更改背景图片

Question

我正在尝试创建一个背景图像更新器/ uploader 组件。

默认设置图像，但是，如果用户想要更新背景图像，我想更新状态并存储图像。

到目前为止的研究表明我需要使用 <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>
        )
    }
}

Answer 1

使用 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

缓存 querySelector var 中的值也是如此

编辑:我认为你不能触发 react 事件 click()这就是我使用原生js的原因。如果我错了请纠正我。