প্রতিক্রিয়া ইভেন্ট ইভেন্ট থেকে কাস্টম বৈশিষ্ট্য অ্যাক্সেস কিভাবে?

Question

প্রতিক্রিয়া http://facebook.github.io/react/docs/jsx-gotchas.html তে বর্ণিত কাস্টম বৈশিষ্ট্যগুলি সরবরাহ করতে সক্ষম :

আপনি যদি কোনও কাস্টম বৈশিষ্ট্য ব্যবহার করতে চান তবে আপনার এটি ডেটা- সহ উপসর্গ করা উচিত।

<div data-custom-attribute="foo" />

এবং ইভেন্টের অবজেক্ট থেকে এটির অ্যাক্সেসের কোনও উপায় আমি খুঁজে না পাওয়া ব্যতীত এটাই দুর্দান্ত খবর:

render: function() {
...
<a data-tag={i} style={showStyle} onClick={this.removeTag}></a>
...
removeTag: function(event) {
    this.setState({inputVal: event.target????}); 
},

উপাদান এবং data-সম্পত্তি এইচটিএমএল জরিমানা করে। স্ট্যান্ডার্ড বৈশিষ্ট্য মত সূক্ষ্ম styleহিসাবে অ্যাক্সেস করা যেতে পারে event.target.style। পরিবর্তেevent.target আমি চেষ্টা করেছি:

 event.target.props.data.tag
 event.target.props.data["tag"]
 event.target.props["data-tag"]  
 event.target.data.tag
 event.target.data["tag"]
 event.target["data-tag"]

এগুলির কোনওটিই কাজ করেনি।

Comments

কোনও মন্তব্য কারও সাহায্য করতে পারে, আমি খুঁজে পেয়েছি 16.3 এর প্রতিক্রিয়া জানায় না এবং পুনরায় সরবরাহকারী উপাদানটির কাস্টম এইচটিএমএল বৈশিষ্ট্যগুলি আপডেট করে যদি আপনি কেবল তাদের কোনও স্টোর ( ফেডু রিডেক্স ) এ পরিবর্তন করেন এবং উপাদানটির সাথে আবদ্ধ হন। এর অর্থ উপাদানটির ফী রয়েছে aria-modal=true, আপনি পরিবর্তনগুলি (মিথ্যাতে) টি এরিয়া / ডেটা অ্যাট্রিবিউটের স্টোরের দিকে ঠেলে দিচ্ছেন , তবে আর কিছুই পরিবর্তন করা হয়নি (যেমন উপাদানগুলির সামগ্রী বা শ্রেণি বা সেখানে ভেরিয়েবল) ফলাফল হিসাবে রিঅ্যাক্টজেগুলি আরিয়া / আপডেট করবে না যে উপাদানগুলিতে ডেটা অ্যাটর্সগুলি। আমি বুঝতে পারার জন্য সারা দিন প্রায় ঘোরাঘুরি করছি।

— অ্যালেক্সনিকনভ

Answer 1

আপনি চেয়েছিলেন অন্যভাবে কাঙ্ক্ষিত ফলাফল পেতে আপনাকে সহায়তা করতে:

render: function() {
    ...
    <a data-tag={i} style={showStyle} onClick={this.removeTag.bind(null, i)}></a>
    ...
},
removeTag: function(i) {
    // do whatever
},

লক্ষ্য করুন bind()। কারণ এটি সমস্ত জাভাস্ক্রিপ্ট, আপনি এর মতো সহজ কাজ করতে পারেন। সেগুলি ট্র্যাক করার জন্য আমাদের আর ডিওএম নোডের সাথে ডেটা সংযুক্ত করার দরকার নেই।

আইএমও এটি ডিওএম ইভেন্টগুলির উপর নির্ভর করার চেয়ে অনেক পরিষ্কার।

এপ্রিল 2017 আপডেট করুন: আজকাল আমি onClick={() => this.removeTag(i)}পরিবর্তে লিখতে চাই.bind

Comments

তবে আপনি আর ইভেন্ট অবজেক্টটি পাস করতে পারবেন না।

— chovy

@ চভী দয়া করে আমাকে ভুল করে সংশোধন করুন তবে সমস্ত জাভাস্ক্রিপ্ট ফাংশন সহজাতভাবে বৈকল্পিক নয়? আমি এটি পরীক্ষা করি নি, তবে আমি ধরে নেব যে "ইভেন্ট অবজেক্ট" এখনও পাস হচ্ছে। এটি আগের প্যারামিটার সূচীতে ঠিক এটি নয়। উপরে উল্লিখিত হিসাবে ফ্যাশনে বাঁধাই unshiftফাংশন আর্গুমেন্ট অ্যারে ইঙ্গিত করার মতো । "ইভেন্ট অবজেক্ট" যদি সূচকে 0থাকত তবে এটি এখন সূচকে থাকবে 1।

— রাইডার ব্রুকস

@ চভী আপনার যদি প্রয়োজন হয় তবে আপনি এটি করতে পারেন। কেবলমাত্র করুনremoveTag: function(i, evt) {

— জারেড ফোর্সিথ

এটি পরিষ্কার, তবে আপনি যদি খুব বেশি কিছু করে থাকেন তবে এই সমস্ত বাঁধাইয়ের পারফরম্যান্স হিট হবে।

— এল ইয়াবো

github.com/yannickcr/eslint-plugin-react/blob/master/docs/rules/…

— জর্ডান

Answer 2

event.targetআপনাকে নেটিভ ডোম নোড দেয়, তারপরে অ্যাট্রিবিউটগুলি অ্যাক্সেস করার জন্য আপনাকে নিয়মিত ডিওএম এপিআই ব্যবহার করতে হবে। এটি কীভাবে করা যায় সে সম্পর্কে এখানে ডক্স রয়েছে: ডেটা অ্যাট্রিবিউট ব্যবহার করে ।

আপনি হয় event.target.dataset.tagবা করতে পারেন event.target.getAttribute('data-tag'); হয় একটি কাজ করে।

Comments

0.13.3 প্রতিক্রিয়া জানান, IE10 অপরিজ্ঞাত event.target.datasetতবে event.target.getAttribute('data-tag')কাজ করে। অন্য ব্রাউজারগুলি ভাল আছে। ধন্যবাদ

— অ্যান্ড্রে বোরিস্কো

এই পদ্ধতির মধ্যে কিছু ভুল আছে? উদাহরণস্বরূপ, ব্যবহারকারী কোন বোতামটি চাপায় তার উপর নির্ভর করে আমি কোনও ফাংশনে স্ট্রিংটি পাস করতে চাই। আমি প্রতিটি ক্ষেত্রে আমার উপাদানটিতে তিনটি ফাংশন করা এড়াতে আশা করছিলাম was

— মাইকেল জে। ক্যালকিনস

এই উত্তরটি পারফরম্যান্সের দিক থেকে গৃহীত উত্তরটির চেয়ে ভাল। এইভাবে এটি করার অর্থ হ'ল আমরা প্রতিটি রেন্ডারে একটি নতুন ফাংশন তৈরি করি না । প্রতিটি রেন্ডারই কেবল একটি নতুন ফাংশন তৈরি করা এড়িয়ে যায় না, তবে যেহেতু প্রতিবার ফাংশন উল্লেখটি একই হবে, খাঁটি (বা স্মৃতিযুক্ত) উপাদানগুলি এটিকে আলাদা ফাংশন হিসাবে দেখবে না। সুতরাং, এটি অকারণে পুরো উপাদানটি প্রতিবার পুনরায় রেন্ডার করবে না। এমনকি কাস্টম প্রয়োগের shouldComponentUpdateক্ষেত্রেও একই সমস্যা থাকবে যদি না আপনি কেবল ফাংশন প্রোপকে পুরোপুরি উপেক্ষা করেন।

— মাইকেল ইয়াওওয়ারস্কি

পুরোপুরি সূক্ষ্মভাবে কাজ করে

— ওগবনা ভাইটালিস

আমি টাইপ স্ক্রিপ্ট ব্যবহার করি। আমার ক্ষেত্রে আমাকে ব্যবহার করতে হয়েছিলevent.currentTarget.getAttibute('data-tag')

— ক্যারিয়ানপুরে

Answer 3

আমি খুঁজে পাওয়া সবচেয়ে ভাল উপায় এখানে:

var attribute = event.target.attributes.getNamedItem('data-tag').value;

এই বৈশিষ্ট্যগুলি একটি "নেমডনোডম্যাপ" এ সঞ্চয় করা হয়, যা আপনি getNamedItem পদ্ধতিতে সহজেই অ্যাক্সেস করতে পারেন।

Comments

আপনি সম্ভবত .valueআসল মান পেতে একটি যুক্ত করতে চান

— উইকুনিয়া

.value@ উইকুনিয়ার পরামর্শ অনুসারে উত্তরটি যুক্ত করার জন্য আমি উত্তরটি সম্পাদনা করেছি

— ফিউগিলেন

Answer 4

অথবা আপনি একটি বন্ধ ব্যবহার করতে পারেন:

render: function() {
...
<a data-tag={i} style={showStyle} onClick={this.removeTag(i)}></a>
...
},
removeTag: function (i) {
    return function (e) {
    // and you get both `i` and the event `e`
    }.bind(this) //important to bind function 
}

Comments

ধন্যবাদ, টিউডর আপনার সমাধানটি ব্যবহার করে দেখুন এবং এটি এমনকি ডাব্লু / ও বাইন্ডিংয়ের কাজ করে। আমি এটি ইটারেটেলে শৈলগুলি টগল করতে ব্যবহার করেছি।

— andriy_sof

আপনি কীভাবে জানবেন যে কোনও অভ্যন্তরীণ ফাংশন ইভেন্টের আরগগুলি ধারণ করবে?

— jack.the.ripper

Answer 5

// Method inside the component
userClick(event){
 let tag = event.currentTarget.dataset.tag;
 console.log(tag); // should return Tagvalue
}
// when render element
<a data-tag="TagValue" onClick={this.userClick}>Click me</a>

Comments

কোডটি বোঝার জন্য আপনার

— অনিরুদ্ধ দাস

Answer 6

প্রতিক্রিয়া v16.1.1 (2017) হিসাবে, এখানে অফিশিয়াল সমাধান রয়েছে: https://reactjs.org/docs/handling-events.html#passing-arguments-to-event-handlers

টিএলডিআর: ওপি করা উচিত:

render: function() {
...
<a style={showStyle} onClick={(e) => this.removeTag(i, e)}></a>
...
removeTag: function(i, event) {
    this.setState({inputVal: i}); 
}

Comments

'আমি' কোথা থেকে আসে?

— ফ্রেশক্রিস

iওপি হ'ল সেই কাস্টম বৈশিষ্ট্যটি যা কোনওভাবে পাস করতে চেয়েছিল। যখন aউপাদানটি সংজ্ঞায়িত করা হয় তখন এটি কিছু পরিবর্তনশীল scope

— টিটেক

ওপি যা চায় তা নয়। তারা অনক্লিক হ্যান্ডলারের সাহায্যে উপাদান (ক) এর একটি বৈশিষ্ট্য মান অ্যাক্সেস করতে চায়।

— এড্রিয়ান

আমার বক্তব্যটি ছিল সরকারী সমাধান হ'ল উপাদানটিতে ডেটা অ্যাট্রিবিউট সেট না করে ইভেন্টের হ্যান্ডলারের ফাংশনটিকে স্কোপের সাথে পরিবর্তনশীল হিসাবে সংজ্ঞায়িত করা। আপনি যদি সত্যিই চান তবে এটি উপাদানগুলির বৈশিষ্ট্যগুলিতে অ্যাক্সেস করা থেকে বিরত রাখে না, তবে এটি প্রতিক্রিয়াটির কোনও ভেরিয়েবল অ্যাক্সেস করার মূর্তিযুক্ত উপায় নয়।

— টিটিক

Answer 7

<div className='btn' onClick={(e) =>
     console.log(e.currentTarget.attributes['tag'].value)}
     tag='bold'>
    <i className='fa fa-bold' />
</div>

সুতরাং e.currentTarget.attributes['tag'].valueআমার জন্য কাজ করে

Answer 8

আপনি এই জাতীয় কিছু বৈশিষ্ট্য অ্যাক্সেস করতে পারেন

event.target.dataset.tag

Answer 9

এই একক লাইন কোডটি আমার জন্য সমস্যার সমাধান করেছে:

event.currentTarget.getAttribute('data-tag')

Answer 10

আমি প্রতিক্রিয়া সম্পর্কে জানি না, তবে সাধারণ ক্ষেত্রে আপনি এই জাতীয় কাস্টম বৈশিষ্ট্যগুলি পাস করতে পারেন:

1) এইচটিএমএল-ট্যাগের ভিতরে ডেটা-উপসর্গ সহ একটি নতুন বৈশিষ্ট্য নির্ধারণ করুন

data-mydatafield = "asdasdasdaad"

2) সাথে জাভাস্ক্রিপ্ট থেকে পেতে

e.target.attributes.getNamedItem("data-mydatafield").value 

Comments

আমার

— নালিশ

Answer 11

যদি কেউ প্রতিক্রিয়াতে ইভেন্ট.আরটিজেট ব্যবহার করার চেষ্টা করে এবং একটি নাল মান সন্ধান করে তবে এটি একটি সিন্থেটিক এভেন্ট ইভেন্ট.টারজেটকে প্রতিস্থাপন করেছে বলেই। সিন্থেটিক এভেন্ট এখন 'কারেন্টটিজেট' ধরে রেখেছে, যেমন ইভেন্ট কন্টেন্টআরটেটজেট.জেটঅ্যাট্রিবিউটে ('ডেটা-ব্যবহারকারীর নাম')।

https://facebook.github.io/react/docs/events.html

দেখে মনে হচ্ছে প্রতিক্রিয়া এটি করে যাতে এটি আরও ব্রাউজার জুড়ে কাজ করে। আপনি একটি নেটিভেন্ট বৈশিষ্ট্যের মাধ্যমে পুরানো বৈশিষ্ট্যগুলি অ্যাক্সেস করতে পারেন।

Answer 12

ডোম বৈশিষ্ট্যগুলি নির্ধারণের পরিবর্তে চেষ্টা করুন (যা ধীরে ধীরে) কেবলমাত্র আপনার মানটিকে কার্যকারিতা হিসাবে চালিত করুন যা আসলে আপনার হ্যান্ডলার তৈরি করে:

render: function() {
...
<a style={showStyle} onClick={this.removeTag(i)}></a>
...
removeTag = (customAttribute) => (event) => {
    this.setState({inputVal: customAttribute});
}

Comments

দুর্দান্ত মন্তব্য বলে মনে হচ্ছে! আমি কীভাবে দেখতে পাচ্ছি যে এটি আরও ধীর গতির ডোম বৈশিষ্ট্যগুলি নির্ধারণ করে

— ইডো ব্লিচার

Answer 13

আপনি কেবল ইভেন্ট.টরেট.ডেটসেট অবজেক্টটি ব্যবহার করতে পারেন । এটি আপনাকে সমস্ত ডেটা অ্যাট্রিবিউট সহ অবজেক্টটি দেবে।

Answer 14

প্রতিক্রিয়াতে আপনার এইচটিএমএল ডেটা দরকার নেই, কোনও ফাংশন অন্য ফাংশন রিটার্ন ব্যবহার করুন; এর মতো এটি কাস্টম প্যারামগুলি প্রেরণ খুব সহজ এবং আপনি কাস্টম ডেটা এবং ইভেন্টটি অ্যাক্সেস করতে পারেন।

render: function() {
...
<a style={showStyle} onClick={this.removeTag(i)}></a>
...
removeTag: (i) => (event) => {
    this.setState({inputVal: i}); 
},