ReactJS में क्लिक इवेंट को मैन्युअल रूप से ट्रिगर कैसे करें?

Question 1

मैं ReactJS में मैन्युअल रूप से एक क्लिक ईवेंट को कैसे ट्रिगर कर सकता हूं ? जब कोई उपयोगकर्ता तत्व 1 पर क्लिक करता है, तो मैं स्वचालित रूप से inputटैग पर एक क्लिक को ट्रिगर करना चाहता हूं ।

<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>

Question 2

आप कॉलबैक के माध्यम से refअंतर्निहित HTMLInputElement ऑब्जेक्ट के संदर्भ को प्राप्त करने के लिए प्रोप का उपयोग कर सकते हैं , संदर्भ को एक क्लास प्रॉपर्टी के रूप में संग्रहीत कर सकते हैं, फिर उस संदर्भ का उपयोग बाद में HTMLElement.click विधि का उपयोग करके अपने ईवेंट हैंडलर्स से क्लिक ट्रिगर करने के लिए कर सकते हैं ।

आपकी renderविधि में:

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

आपके ईवेंट हैंडलर में:

this.inputElement.click();

पूर्ण उदाहरण:

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

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

ईएस 6 तीर फ़ंक्शन को नोट करें thisजो कॉलबैक के लिए सही शाब्दिक गुंजाइश प्रदान करता है । यह भी ध्यान दें, कि आप जिस तरह से इस वस्तु को प्राप्त करते हैं document.getElementById, वह एक वस्तु है जो आप उपयोग करते हुए हासिल करेंगे , अर्थात वास्तविक DOM-node।

Question 3

एक संदर्भ के रूप में ES6 रिएक्ट डॉक्स के साथ मई 2018 काम करने के लिए निम्नलिखित प्राप्त करें : 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;

Question 4

आप refकॉलबैक का उपयोग कर सकते हैं जो वापस आ जाएगा node। click()एक प्रोग्रामेटिक क्लिक करने के लिए उस नोड पर कॉल करें।

divनोड प्राप्त करना

clickDiv(el) {
  el.click()
}

नोड के refलिए एक सेटिंगdiv

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

फिडल को चेक करें

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

आशा करता हूँ की ये काम करेगा!

Question 5

एक कार्यात्मक घटक में यह सिद्धांत भी काम करता है, यह सिर्फ थोड़ा अलग वाक्यविन्यास और सोचने का तरीका है।

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>
    </>
  )

}

Question 6

इसे आज़माएं और मुझे बताएं कि क्या यह आपके अंत में काम नहीं करता है:

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

क्लिक divकरना चाहिए inputतत्व पर एक क्लिक अनुकरण करना चाहिए

Question 7

यहाँ हुक समाधान हैं

    import React, {useRef} from 'react';

    const MyComponent = () =>{

    const myRefname= useRef(null);

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

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

Question 8

रिएक्ट हुक और useRefहुक का उपयोग करना ।

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>
    );
}

Question 9

उपयोग के साथ हारून हकला के जवाब पर रीफिंग इस उत्तर से प्रेरित 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:

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

Question 10

यदि यह Reactjs के नवीनतम संस्करण में काम नहीं करता है, तो इनरर्फ का उपयोग करके देखें

class MyComponent extends React.Component {


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

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

Question 11

  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>

स्निपेट का विस्तार करें

यह मेरे लिए काम करता है

Question 12

कैसे के बारे में सिर्फ सादे पुराने जे एस? उदाहरण:

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>
);