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>

  <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());

};