如何通过 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函数。如何解决这个问题？

【问题讨论】：

标签： javascript reactjs jsx

【解决方案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

【讨论】：