如何通过 ReactJS 中的另一个按钮单击触发 <input type='file' /> 上的 onChange？

Posted 2023-02-21

【中文标题】如何通过 ReactJS 中的另一个按钮单击触发 <input type=\'file\' /> 上的 onChange？

【英文标题】：How to trigger onChange on <input type='file' /> by another Button click in ReactJS?如何通过 ReactJS 中的另一个按钮单击触发 <input type='file' /> 上的 onChange？

【发布时间】：2019-02-01 04:19:14

【问题描述】：

<div style=display: 'grid'>
    <button id='plus' onClick=???>+</button>
    <input id='selectImage' type="file" onChange=fileSelectHandler />
</div>

这里，我想通过点击按钮触发输入的onChange函数。如何解决这个问题？

【参考方案1】：

您可以隐藏原始文件输入，并在点击按钮时通过javascript点击。

upload() 
  document.getElementById("selectImage").click()


<div style=display: 'grid'>
  <button id='plus' onClick=this.upload>+</button>
  <input id='selectImage' hidden type="file" onChange=fileSelectHandler />
</div>

【讨论】：

我喜欢这种方法

【参考方案2】：

创建一个参考：

//inside the constructor:
fileRef = React.createRef()
// in your input element
<input id='selectImage' type="file" onChange=fileSelectHandler ref=this.fileRef />

现在，

<button id='plus' onClick=this.triggerClick>+</button>

triggerClick() 
  this.fileRef.current.click()

【参考方案3】：

这对我很有效。它将隐藏丑陋的文件输入组件，并允许您在单击按钮时触发其单击功能。

import React from 'react'

import 
    Button,
    Input,
    Label
 from 'reactstrap'

class UploadButton extends React.Component 

    constructor(props) 
        super(props)
        this.fileInput = React.createRef() // ref to fileInput

    

    // when called, triggers fileInput click function
    triggerInputFile = () => 
        if (this.fileInput.current != undefined && this.fileInput.current.click != undefined)
            this.fileInput.current.click()
    

    // handle file upload 
    handleFileUpload = () => 
        // handle click
    

    render() 
        var color = 'primary'
        return (
            <div className='content'>
                <Button
                    color=color
                    onClick=() => this.triggerInputFile()
                >
                    Upload

                </Button>

                <input
                    ref=this.fileInput
                    type='file'
                    onClick=() => this.handleFileUpload()
                    style=styles.input
                />
            </div>

        )
    



const styles = 
    input: 
        opacity: '0%', // dont want to see it
        position: 'absolute' // does not mess with other elements 
    


export default UploadButton