Làm cách nào để kích hoạt sự kiện nhấp chuột theo cách thủ công trong ReactJS?

Làm cách nào để kích hoạt sự kiện nhấp chuột trong ReactJS theo cách thủ công ? Khi người dùng nhấp vào phần tử1, tôi muốn tự động kích hoạt một lần nhấp vào inputthẻ.

<div className="div-margins logoContainer">
  <div id="element1" className="content" onClick={this.uploadLogoIcon}>
    <div className="logoBlank" />
  </div>
  <input accept="image/*" type="file" className="hide"/>
</div>

Bạn có thể sử dụng phần mềm refhỗ trợ để có được một tham chiếu đến đối tượng HTMLInputElement bên dưới thông qua một lệnh gọi lại, lưu trữ tham chiếu dưới dạng thuộc tính lớp, sau đó sử dụng tham chiếu đó để kích hoạt một lần nhấp từ trình xử lý sự kiện của bạn bằng cách sử dụng HTMLElement.click phương thức .

Trong renderphương pháp của bạn :

<input ref={input => this.inputElement = input} ... />

Trong trình xử lý sự kiện của bạn:

this.inputElement.click();

Ví dụ đầy đủ:

class MyComponent extends React.Component {
  render() {
    return (
      <div onClick={this.handleClick}>
        <input ref={input => this.inputElement = input} />
      </div>
    );
  }

  handleClick = (e) => {
    this.inputElement.click();
  }
}

Lưu ý hàm mũi tên ES6 cung cấp phạm vi từ vựng chính xác cho thislệnh gọi lại. Cũng lưu ý rằng đối tượng mà bạn có được theo cách này là một đối tượng giống với những gì bạn sẽ có được bằng cách sử dụng document.getElementById, tức là nút DOM thực tế.

Có những thứ sau để hoạt động vào tháng 5 năm 2018 với Tài liệu React ES6 làm tài liệu tham khảo: https://reactjs.org/docs/refs-and-the-dom.html

import React, { Component } from "react";
class AddImage extends Component {
  constructor(props) {
    super(props);
    this.fileUpload = React.createRef();
    this.showFileUpload = this.showFileUpload.bind(this);
  }
  showFileUpload() {
    this.fileUpload.current.click();
  }
  render() {
    return (
      <div className="AddImage">
        <input
          type="file"
          id="my_file"
          style={{ display: "none" }}
          ref={this.fileUpload}
        />
        <input
          type="image"
          src="http://www.graphicssimplified.com/wp-content/uploads/2015/04/upload-cloud.png"
          width="30px"
          onClick={this.showFileUpload}
        />
      </div>
    );
  }
}
export default AddImage;

Bạn có thể sử dụng refcallback sẽ trả về node. Gọi click()vào nút đó để thực hiện một nhấp chuột có lập trình.

Bắt divnút

clickDiv(el) {
  el.click()
}

Đặt a refcho divnút

<div 
  id="element1"
  className="content"
  ref={this.clickDiv}
  onClick={this.uploadLogoIcon}
>

Kiểm tra fiddle

https://jsfiddle.net/pranesh_ravi/5skk51ap/1/

Hy vọng nó giúp!

Trong một thành phần chức năng, nguyên tắc này cũng hoạt động, nó chỉ là một cú pháp và cách suy nghĩ hơi khác.

const UploadsWindow = () => {
  // will hold a reference for our real input file
  let inputFile = '';

  // function to trigger our input file click
  const uploadClick = e => {
    e.preventDefault();
    inputFile.click();
    return false;
  };

  return (
    <>
      <input
        type="file"
        name="fileUpload"
        ref={input => {
          // assigns a reference so we can trigger it later
          inputFile = input;
        }}
        multiple
      />

      <a href="#" className="btn" onClick={uploadClick}>
        Add or Drag Attachments Here
      </a>
    </>
  )

}

Hãy thử điều này và cho tôi biết nếu nó không hoạt động ở phía bạn:

<input type="checkbox" name='agree' ref={input => this.inputElement = input}/>
<div onClick={() => this.inputElement.click()}>Click</div>

Nhấp vào divsẽ mô phỏng một lần nhấp vào inputphần tử

Đây là giải pháp Hooks

    import React, {useRef} from 'react';

    const MyComponent = () =>{

    const myRefname= useRef(null);

    const handleClick = () => {
        myRefname.current.focus();
     }

    return (
      <div onClick={handleClick}>
        <input ref={myRefname}/>
      </div>
     );
    }

Sử dụng React Hooks và useRefhook .

import React, { useRef } from 'react';

const MyComponent = () => {
    const myInput = useRef(null);

    const clickElement = () => {
        // To simulate a user focusing an input you should use the
        // built in .focus() method.
        myInput.current?.focus();

        // To simulate a click on a button you can use the .click()
        // method.
        // myInput.current?.click();
    }

    return (
        <div>
            <button onClick={clickElement}>
                Trigger click inside input
            </button>
            <input ref={myInput} />
        </div>
    );
}

Nghi ngờ câu trả lời của Aaron Hakala với useRef lấy cảm hứng từ câu trả lời này https://stackoverflow.com/a/54316368/3893510

const myRef = useRef(null);

  const clickElement = (ref) => {
    ref.current.dispatchEvent(
      new MouseEvent('click', {
        view: window,
        bubbles: true,
        cancelable: true,
        buttons: 1,
      }),
    );
  };

Và JSX của bạn:

<button onClick={() => clickElement(myRef)}>Click<button/>
<input ref={myRef}>

Nếu nó không hoạt động trong phiên bản mới nhất của reactjs, hãy thử sử dụng innerRef

class MyComponent extends React.Component {


  render() {
    return (
      <div onClick={this.handleClick}>
        <input innerRef={input => this.inputElement = input} />
      </div>
    );
  }

  handleClick = (e) => {
    this.inputElement.click();
  }
}

  imagePicker(){
        this.refs.fileUploader.click();
        this.setState({
            imagePicker: true
        })
    }

  <div onClick={this.imagePicker.bind(this)} >
  <input type='file'  style={{display: 'none'}}  ref="fileUploader" onChange={this.imageOnChange} /> 
  </div>

Công việc này cho tôi

Làm thế nào về chỉ đơn giản js cũ? thí dụ:

autoClick = () => {
 if (something === something) {
    var link = document.getElementById('dashboard-link');
    link.click();
  }
};
  ......      
var clickIt = this.autoClick();            
return (
  <div>
     <Link id="dashboard-link" to={'/dashboard'}>Dashboard</Link>
  </div>
);