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

Question

我有一个输入按钮和输入文件,我想点击按钮,它将触发REACT JS中的INPUT FILE事件.

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

然后按钮

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

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

非常感谢您的帮助.:-)

Answer 1

在功能组件中使用useRef Hook。需要反应 ^16.8，

const Dummy = () => {
  const inputFileRef = useRef( null );

  const onFilechange = ( e ) => {
    /*Selected files data can be collected here.*/
    console.log( e.target.files );
  }
  const onBtnClick = () => {
    /*Collecting node-element and performing click*/
    inputFileRef.current.click();
  }

  return (
    <form className="some-container">
      <input
        type="file"
        ref={inputFileRef}
        onChange={onFileChange}
      />
      <button onClick={onBtnClick}>Select file</button>
    </form>
  )
}

使用React.createRef()实现类并使用节点元素处理点击。

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

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

  handleFileChange( e ) {
    /*Selected files data can be collected here.*/
    console.log( e.target.files );
  }

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

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

Answer 2

你不需要jQuery.你甚至不需要事件处理程序.HTML有一个特定的元素,称为标签.

首先,确保您的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 3

您可以使用ref,fe触发输入类型文件:

在你的类组件上:

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

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

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

Answer 4

使用带有 userref 的钩子：

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 5

编辑：这是我很久以前回答的一个问题，现在不太了解反应。有趣的是它被认为是有效的^^。

因此，对于阅读此答案的任何人来说；这个答案是错误的，并且是一个很好的例子，说明了您不应该在反应中做的事情。

请在下面找到一个很好的反模式，再次强调，不要这样做。

===================================================

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

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

React 没有提供触发事件的特定函数，您可以使用 jQuery 或简单的原生 Javascript：请参阅MDN 上的创建和触发事件