Как я могу вручную вызвать событие щелчка в ReactJS? Когда пользователь нажимает на element1, я хочу автоматически запускать щелчок по тегу input.

Mamata Hegde

Ответов: 13

Ответы (13)

Вы можете использовать опору ref, чтобы получить ссылку на базовый объект HTMLInputElement через обратный вызов, сохранить ссылку как свойство класса, затем использовать эта ссылка для последующего запуска щелчка из ваших обработчиков событий с использованием метода HTMLElement.click.

В вашем методе render:

 this.inputElement = input} ... />

В вашем обработчике событий:

this.inputElement.click();

Полный пример:

class MyComponent extends React.Component {
  render() {
    return (
      
this.inputElement = input} />
); } handleClick = (e) => { this.inputElement.click(); } }

Обратите внимание на стрелочную функцию ES6, которая обеспечивает правильную лексическую область для this в обратном вызове. Также обратите внимание, что объект, который вы получаете таким образом, является объектом, аналогичным тому, что вы получили бы с помощью document.getElementById, то есть фактического DOM-узла.

Для работы с ES6 в мае 2018 г. React Docs как ссылка: 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 (
      
); } } export default AddImage;

Как насчет простого старого js? пример:

autoClick = () => {
 if (something === something) {
    var link = document.getElementById('dashboard-link');
    link.click();
  }
};
  ......      
var clickIt = this.autoClick();            
return (
  
Dashboard
);

Попробуйте это и дайте мне знать, если это не сработает на вашей стороне:

 this.inputElement = input}/>
this.inputElement.click()}>Click

Щелчок по div должен имитировать щелчок по input элемент

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

Эта работа у меня

this.buttonRef.current.click();

Riffing на ответ Аарона Хакала с useRef, вдохновленный этим ответом 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,
      }),
    );
  };

И ваш JSX:

Вот решение хуков

    import React, {useRef} from 'react';

    const MyComponent = () =>{

    const myRefname= useRef(null);

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

    return (
      
); }
  let timer;
  let isDoubleClick = false;

  const handleClick = () => {
    if(!isDoubleClick) {
      isDoubleClick = true;
      timer = setTimeout(() => {
        isDoubleClick = false;
        props.onClick();
      }, 200);
    } else {
      clearTimeout(timer);
      props.onDoubleClick();
    }
  }

return 

Если это не работает в последней версии reactjs, попробуйте использовать innerRef

class MyComponent extends React.Component {


  render() {
    return (
      
this.inputElement = input} />
); } handleClick = (e) => { this.inputElement.click(); } }

В функциональном компоненте этот принцип тоже работает, просто немного другой синтаксис и способ мышления.

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 (
    <>
       {
          // assigns a reference so we can trigger it later
          inputFile = input;
        }}
        multiple
      />

      
        Add or Drag Attachments Here
      
    
  )

}

Использование React Hooks и useRef hook.

импортировать React, {useRef} from 'react';

const MyComponent = () => {
    const myInput = useRef (ноль);

    const clickElement = () => {
        // Чтобы имитировать фокусировку пользователя на вводе, вы должны использовать
        // встроенный метод .focus ().
        myInput.current? .focus ();

        // Чтобы имитировать щелчок по кнопке, вы можете использовать .click ()
        // метод.
        // myInput.current? .click ();
    }

    возвращение (
        
); }

Вы можете использовать обратный вызов ref, который вернет узел . Вызовите click () на этом узле, чтобы выполнить программный щелчок.

Получение узла div

clickDiv(el) {
  el.click()
}

Установка ref в узел div

Проверить скрипку

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

Надеюсь, это поможет!

2022 WebDevInsider