Javascript 如何在<；输入类型='；文件'/&燃气轮机；通过另一个按钮点击ReactJS？ +

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

您可以隐藏原始文件输入，并通过javascript单击按钮使其单击

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

upload（）{
document.getElementById（“selectImage”）。单击（）
}
+
上载文件后将调用
onChange
，单击“选择文件”输入后将调用
onClick
。这就是你如何做到这一点：

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>

类SomeComponent扩展React.Component{
建造师（道具）{
超级（道具）；
}
fileSelectHandler=（）=>{
console.log（“已更改”）
}
clickhandler=（）=>{
console.log（“单击”）
}
render（）{
返回(
)
}
}
创建一个引用：

class SomeComponent extends React.Component {
 constructor(props) {
    super(props);

  }
fileSelectHandler=()=> {
    console.log("changed")
  }

clickhandler = () => {
  console.log("clicked")
}

  render() {
    return (
      <div style={{ display: 'grid' }}>
        <button  id='plus' />
        <input id='selectImage' type="file" onClick={this.clickhandler} onChange={this.fileSelectHandler} />
      </div>
    )
  }
}

//构造函数内部：
fileRef=React.createRef（）
//在输入元素中

现在,

+
triggerClick（）{
this.fileRef.current.click（）
}
这对我很有效。它将隐藏丑陋的文件输入组件，并允许您在单击按钮时触发其单击功能

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

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

从“React”导入React
进口{
按钮
输入，
标签
}从“反应带”
类UploadButton扩展了React.Component{
建造师（道具）{
超级（道具）
this.fileInput=React.createRef（）//引用到fileInput
}
//调用时，触发fileInput单击函数
triggerInputFile=（）=>{
if（this.fileInput.current！=未定义&&this.fileInput.current.click！=未定义）
this.fileInput.current.click（）
}
//处理文件上传
handleFileUpload=（）=>{
//手柄点击
}
render（）{
var color='primary'
返回(
this.triggerInputFile（）}
>
上传
this.handleFileUpload（）}
style={style.input}
/>
)
}
}
常量样式={
输入：{
不透明度：“0%”，//不想看到它
位置：'绝对'//不与其他元素混淆
}
}
导出默认上载按钮
@techKid这个怎么了？你应该提供理由，让别人知道他犯了错误。我喜欢这种方法
<button id='plus' onClick={this.triggerClick}>+</button>

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

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