আপনি কীভাবে কোনও শিশু উপাদানগুলির স্থিতিটি অ্যাক্সেস করতে পারবেন সে সম্পর্কে বিস্তারিত জানার আগে, দয়া করে এই নির্দিষ্ট পরিস্থিতিটি পরিচালনা করার জন্য আরও ভাল সমাধান সম্পর্কে মার্কাস-আইপস এর উত্তরটি অবশ্যই পড়তে ভুলবেন না ।
আপনি যদি সত্যিই কোনও উপাদানগুলির বাচ্চাদের অবস্থা অ্যাক্সেস করতে চান তবে ref
আপনি প্রতিটি সন্তানের কাছে ডাকা একটি সম্পত্তি অর্পণ করতে পারেন । রেফারেন্সগুলি বাস্তবায়নের দুটি উপায় রয়েছে: ব্যবহার React.createRef()
এবং কলব্যাক রেফগুলি।
ব্যবহার React.createRef()
প্রতিক্রিয়া 16.3 এর হিসাবে রেফারেন্সগুলি ব্যবহার করার জন্য এটি বর্তমানে প্রস্তাবিত উপায় ( আরও তথ্যের জন্য ডক্স দেখুন )। আপনি যদি পূর্ববর্তী সংস্করণ ব্যবহার করে থাকেন তবে নীচে কলব্যাকের রেফারেন্সগুলি দেখুন।
আপনার প্যারেন্ট উপাদানটির কনস্ট্রাক্টরে আপনাকে একটি নতুন রেফারেন্স তৈরি করতে হবে এবং তারপরে ref
এট্রিবিউটের মাধ্যমে এটি কোনও সন্তানের কাছে অর্পণ করতে হবে ।
class FormEditor extends React.Component {
constructor(props) {
super(props);
this.FieldEditor1 = React.createRef();
}
render() {
return <FieldEditor ref={this.FieldEditor1} />;
}
}
এই ধরণের রেফ অ্যাক্সেস করতে আপনার ব্যবহার করতে হবে:
const currentFieldEditor1 = this.FieldEditor1.current;
এটি মাউন্ট করা উপাদানটির একটি উদাহরণ ফিরিয়ে দেবে যাতে আপনি তারপরে currentFieldEditor1.state
রাজ্যে অ্যাক্সেস ব্যবহার করতে পারেন।
কেবলমাত্র একটি द्रुत নোট বলার জন্য যে আপনি যদি এই রেফারেন্সগুলি কোনও উপাদান (উদাহরণস্বরূপ <div ref={this.divRef} />
) এর পরিবর্তে কোনও ডিওএম নোডে ব্যবহার করেন তবে this.divRef.current
কোনও উপাদানগুলির উদাহরণের পরিবর্তে অন্তর্নিহিত DOM উপাদানটি ফিরিয়ে দেবেন।
কলব্যাক রেফারেন্স
এই সম্পত্তিটি একটি কলব্যাক ফাংশন নেয় যা সংযুক্ত উপাদানটির জন্য একটি রেফারেন্স পাস করা হয়। এই কলব্যাকটি উপাদানটি মাউন্ট করা বা আনমাউন্ট করার সাথে সাথেই কার্যকর করা হয়।
উদাহরণ স্বরূপ:
<FieldEditor
ref={(fieldEditor1) => {this.fieldEditor1 = fieldEditor1;}
{...props}
/>
এই উদাহরণগুলিতে রেফারেন্সটি প্যারেন্ট উপাদানগুলিতে সংরক্ষণ করা হয়। আপনার কোডটিতে এই উপাদানটি কল করতে, আপনি ব্যবহার করতে পারেন:
this.fieldEditor1
এবং তারপরে this.fieldEditor1.state
রাষ্ট্রটি পেতে ব্যবহার করুন ।
একটি বিষয় লক্ষণীয়, নিশ্চিত করুন যে আপনি আপনার সন্তানের উপাদানটি অ্যাক্সেস করার আগে it _ ^ অ্যাক্সেস করার আগে রেন্ডার হয়েছে ^
উপরের মতো, আপনি যদি এই রেফারেন্সগুলি কোনও উপাদান (উদাহরণস্বরূপ <div ref={(divRef) => {this.myDiv = divRef;}} />
) এর পরিবর্তে কোনও ডিওএম নোডে ব্যবহার করেন তবে this.divRef
কোনও উপাদানগুলির উদাহরণের পরিবর্তে অন্তর্নিহিত DOM উপাদানটি ফিরিয়ে দেবেন।
আরো তথ্য
আপনি যদি রিঅ্যাক্টের রেফার সম্পত্তি সম্পর্কে আরও জানতে চান তবে ফেসবুক থেকে এই পৃষ্ঠাটি দেখুন ।
নিশ্চিত হয়ে নিন যে আপনি " ডোন্ট ওভার ইউজ রেফস " বিভাগটি পড়েছেন যা বলে যে আপনার সন্তানের ব্যবহার state
"জিনিসগুলি ঘটানোর জন্য" করা উচিত নয় ।
আশা করি এটি ^ _ ^ সহায়তা করবে ^
সম্পাদনা করুন: React.createRef()
রেফ তৈরির জন্য যুক্ত পদ্ধতি। ES5 কোড সরানো হয়েছে।