Question

我有一个 INPUT BUTTON 和 INPUT FILE ，我想点击 BUTTON ，它会触发 INPUT FILE < / strong> REACT JS。

中的活动
React.createElement('input',{type:'file', name:'myfile'})

然后是按钮

React.createElement('a',{onClick: this.doClick},'Select File')

那么当我们点击A HREF时如何定义和触发INPUT FILE点击事件？

感谢您的帮助。： - ）

Answer 1

你不需要jQuery。你甚至不需要事件处理程序。 HTML有一个特定的元素，称为label。

首先，确保您的input元素具有id属性：

React.createElement('input',{type:'file', name:'myfile', id:'myfile'})

然后，而不是：

React.createElement('a',{onClick: this.doClick},'Select File')

尝试：

React.createElement('label',{htmlFor: 'myfile'},'Select File')

（而不是添加htmlFor和id属性，另一种解决方案是使input元素成为label的子元素。）

现在点击label会触发与点击input本身相同的行为。

Answer 2

您可以使用ref，f.e：

触发输入类型文件上的

：

<input 
    ref={fileInput => this.fileInput = fileInput} 
    type="file"
 />
<button onClick={this.triggerInputFile}> Select File </button>

并在该类组件上创建一个函数：

triggerInputFile = () => this.fileInput.click()

Answer 3

使用挂钩with useref：

import React, {useRef} from 'react';
const FancyInput = () => {
    const fileInput = useRef(null)

    const handleClick = () => {
        fileInput.current.click()
    }

    const handleFileChange = event => {
        console.log("Make something")
    }

    return(
        <div className="patientactions-container">
            <input
                type="file"
                onChange={(e) => handleFileChange(e)}
                ref={fileInput} 
            />
            <div onClick={() => handleClick()}></div>
        </div>
    )
}
export default FancyInput;

Answer 4

基于@YÒGÎ的答案，这是使用TypeScript的实现：

class Dummy extends React.Component {
    fileInputRef: React.RefObject<HTMLInputElement> = React.createRef();

    forwardClickToInputElement = () => {
        this.fileInputRef.current!.click();
    };

    handleUploadDemand = (ie: ChangeEvent<HTMLInputElement>) => {
        const fileList: FileList = ie.target.files;

        // do something with the FileList, for example:
        const fileReader = new FileReader();
        fileReader.onload = () => {
            const str = String(fileReader.result);
            try {
                const parsedContent = YOUR_OWN_PARSING(str);
            } catch (error) {
                // YOUR OWN ERROR HANDLING
            }
        };
        fileReader.readAsBinaryString(fileList[0])
    }

    render() {
        return (
            <div className="some-container">
                <button onClick={this.forwardClickToInputElement}>Select File</button>
                <input ref={this.fileInputRef} type="file" onChange={this.handleSelectFile} hidden={true}/>
            </div>
        )
    }
}

参考：

React with Typescript https://stackoverflow.com/a/50505931/2848676中如何使用引用的解决方案
使用！引用类型变窄https://medium.com/@martin_hotell/react-refs-with-typescript-a32d56c4d315

Answer 5

使用 React.createRef（）实施，并使用 node元素处理点击。

class Dummy extends React.Component {

    constructor(props) {
        super(props);

        this.inputFileRef = React.createRef();
        this.onBtnClick = this.handleBtnClick.bind(this)
    }

    handleBtnClick() {
        /*Collecting node-element and performing click in latest version*/
        this.inputFileRef.current.click();
    }

    render() {
        return (
            <div className="some-container">
                <input ref={this.inputFileRef} />
                <button onClick={this.onBtnClick}>Select file</button>
            </div>
        )
    }
}

Answer 6

您可以使用jQuery实现此目的：

this.doClick: function() {
    $('input[type=file]').trigger('click');
}

React不提供触发事件的特定功能，您可以使用jQuery或简单的原生Javascript：在MDN上查看Creating and triggering个事件

如何通过另一个DOM触发INPUT FILE事件REACTJS

6 个答案: