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}

                    />

我目前的输出：

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

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引用输入类型的标签。通过这样做，我们不需要使用fileforref有关此链接中的信息。现在需要做的就是为label标签编写适当的 css<div>&nbsp; <label htmlFor="myInput"><Icon style={{ fontSize: '20px'}} type="camera" /></label>&nbsp; <input&nbsp; &nbsp; id="myInput"&nbsp; &nbsp; style={{display:'none'}}&nbsp; &nbsp; type={"file"}&nbsp; &nbsp; onChange={this.fileSelectedHandler}&nbsp; /></div>之后，触发文件上传。我们可以fileUploadHandler在fileSelectedHandler被调用后调用。fileSelectedHandler = (event) => {&nbsp; console.log(event.target.files[0]);&nbsp; this.setState({&nbsp; &nbsp; &nbsp; selectedFile: event.target.files[0]&nbsp; }, () => this.fileUploadHandler());};