javascript - Reactjs:将 <input type ="file"> 转换为自定义按钮图标的问题

Question

我是 React 的新手，正在尝试构建一个应用程序，我想在其中按下一个自定义按钮，该按钮将打开一个文件对话框并在选择它时上传一个文件。这是我的代码:

class ComposeButtons extends Component{

    constructor(props) {
        super(props);
        this.state={
            selectedFile: null
        };
        this.myInput = React.createRef();
    }

    fileSelectedHandler = (event) => {
        console.log(event.target.files[0]);
        this.setState({
            selectedFile: event.target.files[0]
        })
    };
    triggerClick = () => {
        this.myInput.current.click()
    };

    fileUploadHandler = () => {
      /* file upload triggered */
      console.log('file upload triggered');
    };

    render() {
        return(
            <div className={"composeForm-area"}>
                <div>
                    <Input
                        style={{display:'none'}}
                        type={"file"}
                        onChange={this.fileSelectedHandler}
                        ref={this.myInput}
                    />
                    <Button onClick={this.triggerClick}
                            onChange={this.fileUploadHandler} 
                            style={{ backgroundColor: '#DDDCDC'}}>
                        <Icon style={{ fontSize: '20px'}} type="camera" />
                    </Button>
                </div>
            </div>
        )
    }
}
export default ComposeButtons;

我当前的输出:



我只得到一个像上面这样的可点击图标，但是，点击它会抛出:

Uncaught TypeError: _this.myInput.current.click is not a function
    at eval (ComposeButtons.js:88)
    at Button._this.handleClick (button.js:143)
    at HTMLUnknownElement.callCallback (react-dom.development.js:14

我想要的:

我只是想在单击此相机按钮时打开一个文件对话框来选择文件，然后在文件对话框中选择并按确定后，它应该关闭并触发 fileUploadHandler在控制台上打印消息的功能。就这样!

我试过的:

除了上面的代码，我尝试用以下代码替换渲染方法中的 div 内的代码:

        <div>
            <Input
                id="myInput"
                style={{display:'none'}}
                type={"file"}
                onChange={this.fileSelectedHandler}
                ref={(ref) => this.myInput = ref}
            />
            <Button onClick={(e) => this.myInput.click() }
                    style={{ backgroundColor: '#DDDCDC'}}>
                <Icon style={{ fontSize: '20px'}} type="camera" />
            </Button>
        </div>

我也遵循了 stackoverflow 上的几乎所有答案，但似乎没有什么对我有用。如果有人能指出我正确的方向，那将非常有帮助。

这是我在 React 中的第一个爱好项目。

Answer 1

据我得到你的问题。我们所能做的就是添加一个label标签引用输入类型file使用 for标签标签中的属性。通过这样做，我们不需要使用 ref
有关此 link 的信息.

现在需要做的就是为 label 编写适当的 css。标签

<div>
  <label htmlFor="myInput"><Icon style={{ fontSize: '20px'}} type="camera" /></label>
  <input
    id="myInput"
    style={{display:'none'}}
    type={"file"}
    onChange={this.fileSelectedHandler}
  />
</div>

之后，触发文件上传。我们可以调用fileUploadHandler在 fileSelectedHandler 之后叫做。

fileSelectedHandler = (event) => {
  console.log(event.target.files[0]);
  this.setState({
      selectedFile: event.target.files[0]
  }, () => this.fileUploadHandler());
};