আমি কীভাবে 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>
inputউপাদানকে প্রোগ্রামক্রমে ফোকাস করার জন্য একদম বৈধ ব্যবহার-কেস , যা সম্ভবত প্রশ্নকর্তা প্রোগ্রামিকভাবে ট্রিগারযুক্ত ক্লিকের সাথে কী অর্জন করতে চায়।
উত্তর:
আপনি কলব্যাকের মাধ্যমে refঅন্তর্নিহিত এইচটিএমএলপুট উপাদান উপাদানটির একটি রেফারেন্স অর্জন করতে প্রপ ব্যবহার করতে পারেন , রেফারেন্সটিকে শ্রেণীর সম্পত্তি হিসাবে সংরক্ষণ করতে পারেন, তারপরে এই রেফারেন্সটি পরে আপনার ইভেন্ট হ্যান্ডলারগুলি থেকে এইচটিএমএলিমেন্ট.লিক পদ্ধতিতে ক্লিক করে ট্রিগার করতে ব্যবহার করতে পারেন ।
আপনার 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();
}
}
ES6 তীর ফাংশন নোট করুন thisযা কলব্যাকের জন্য সঠিক লেক্সিকাল স্কোপ সরবরাহ করে । আরও মনে রাখবেন যে আপনি যে অবজেক্টটি এই উপায়ে অর্জিত তা হ'ল একটি বস্তু যা আপনি যা ব্যবহার করবেন তা হ'ল document.getElementByIdপ্রকৃত ডোম-নোড।
clickএটির কল করি তখন clickঅপরিজ্ঞাত হয়। আমি অন্যান্য সমস্ত বৈশিষ্ট্য এবং কলব্যাক দেখতে পাচ্ছি যা আমি সেই উপাদানটির জন্য নিযুক্ত করেছি। কোন ধারনা?
ref={(ref)=>{this.fileUploadRef = ref}এবং তারপরে আমার বোতামonClick={()=>{this.fileUploadRef.click()}}
রেফারেন্স হিসাবে 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;
আপনি 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/
আশা করি এটা সাহায্য করবে!
ref={elem => this.elem = elem} না করলেও কল্যাগব্যাক -ভিত্তিক সিনট্যাক্স দ্বারা ছাড়ানো উত্তরাধিকার কার্যকারিতা হিসাবে বিবেচিত হয়: - এটি রেফস টু কম্পোনেন্টগুলিতে বিস্তারিত ।
elআগে আপনার নিশ্চিত হওয়া উচিত যে শূন্য / অপরিশোধিত নয়।
কার্যকরী উপাদানগুলিতে এই নীতিটিও কাজ করে, এটি কিছুটা ভিন্ন বাক্য গঠন এবং চিন্তাভাবনা।
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>
</>
)
}
এটি চেষ্টা করে দেখুন এবং এটি যদি আপনার শেষের দিকে কাজ করে না তবে আমাকে জানান:
<input type="checkbox" name='agree' ref={input => this.inputElement = input}/>
<div onClick={() => this.inputElement.click()}>Click</div>
ক্লিক divকরাতে inputউপাদানটির উপর ক্লিক ক্লিক করা উচিত
এখানে হুকস সমাধান রয়েছে
import React, {useRef} from 'react';
const MyComponent = () =>{
const myRefname= useRef(null);
const handleClick = () => {
myRefname.current.focus();
}
return (
<div onClick={handleClick}>
<input ref={myRefname}/>
</div>
);
}
প্রতিক্রিয়া হুক এবং 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>
);
}
ব্যবহারের সাথে অ্যারন হাকালার জবাবের উপর রিফিং এই উত্তরটি দিয়ে অনুপ্রাণিত 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,
}),
);
};
এবং আপনার জেএসএক্স:
<button onClick={() => clickElement(myRef)}>Click<button/>
<input ref={myRef}>
যদি এটি রিট্যাক্সের সর্বশেষতম সংস্করণে কাজ না করে তবে ইনারআরফ ব্যবহার করে দেখুন
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>আমার জন্য এই কাজ
কীভাবে স্রেফ পুরানো জেএস সম্পর্কে? উদাহরণ:
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>
);