reactjs - 单击 div 时打开文件浏览器使用react

Question

我的 react 组件:

import React, { PropTypes, Component } from 'react'


class Content extends Component {
    handleClick(e) {
        console.log("Hellooww world")
    }
    render() {
        return (
            <div className="body-content">
                <div className="add-media" onClick={this.handleClick.bind(this)}>
                    <i className="plus icon"></i>
                    <input type="file" id="file" style={{display: "none"}}/>
                </div>
            </div>
        )
    }
}

export default Content

在这里，当我单击带有图标的 div 时，我想打开 <input>文件显示了选择照片的选项。选择照片后，我想获取选择的照片的值。我怎样才能在 react 中做到这一点？

Answer 1

首先，为您的输入创建引用钩子(Hook)。

const inputFile = useRef(null) 
// or, for TypeScript
// const inputFile = useRef<HTMLInputElement | null>(null);

然后将其设置为您的输入，并为它添加一个display: none样式，以将其从屏幕上隐藏。

<input type='file' id='file' ref={inputFile} style={{display: 'none'}}/>

然后创建函数来处理打开的文件。该函数应该位于您使用 useRef Hook 的同一函数内。

const onButtonClick = () => {
  // `current` points to the mounted file input element
  inputFile.current.click();
};

然后将函数设置为 button 元素:

<button onClick={onButtonClick}>Open file upload window</button>

API for HTML input file