প্রতিক্রিয়া js অন ক্লিক করুন পদ্ধতিতে মান পাস করতে পারে না

Question

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

SyntheticMouseEvent {dispatchConfig: Object, dispatchMarker: ".1.1.0.2.0.0:1", nativeEvent: MouseEvent, type: "click", target

আমার কোডটি সঠিকভাবে কাজ করছে। আমি যখন চালনা করি তখন দেখতে পাই {column}তবে এটি অনক্লিক ইভেন্টে পেতে পারি না।

আমার কোড:

var HeaderRows = React.createClass({
  handleSort:  function(value) {
    console.log(value);
  },
  render: function () {
    var that = this;
    return(
      <tr>
        {this.props.defaultColumns.map(function (column) {
          return (
            <th value={column} onClick={that.handleSort} >{column}</th>
          );
        })}
        {this.props.externalColumns.map(function (column) {
          // Multi dimension array - 0 is column name
          var externalColumnName = column[0];
          return ( <th>{externalColumnName}</th>);
        })}
      </tr>
    );
  }
});

আমি কীভাবে onClickপ্রতিক্রিয়া জেএসে ইভেন্টটির কোনও মূল্য পাস করতে পারি ?

Comments

রিঅ্যাক্ট.জেজে অনক্লিক ইভেন্টের বাঁধাইয়ের

— ওয়্যার্ডপ্রাইরি

এর পরিবর্তে স্ব ব্যবহারের কথা বিবেচনা করুন। এটি মোটামুটি বিভ্রান্তিকর কারণ এটি "এটি" এর সমার্থক হওয়া উচিত (যদিও তার প্রত্যেকের কাছে সত্যই গুরুত্বপূর্ণ নয়)

— ড্যান

বাঁধাই পদ্ধতি এবং তীর পদ্ধতিটি ব্যবহার করে আমরা মানটি অনক্লিক ইভেন্টে পাস করতে পারি

— মেরুগু প্রশান্ত

এই উদাহরণটি দেখুন জেএসে তীর ফাংশনটির প্যারামিটারগুলি পাস করা

— সুমিট কুমার প্রধান

Answer 1

সহজ পথ

একটি তীর ফাংশন ব্যবহার করুন:

return (
  <th value={column} onClick={() => this.handleSort(column)}>{column}</th>
);

এটি একটি নতুন ফাংশন তৈরি করবে handleSortযা ডান প্যারামগুলির সাথে কল করে।

উত্তম উপায়

এটি একটি উপ-উপাদান মধ্যে এক্সট্রাক্ট। রেন্ডার কলটিতে একটি তীর ফাংশনটি ব্যবহার করার ক্ষেত্রে সমস্যাটি হ'ল এটি প্রতিবার একটি নতুন ফাংশন তৈরি করবে, যা অপ্রয়োজনীয় পুনঃ-রেন্ডারগুলির কারণে শেষ হয়।

আপনি যদি একটি উপ-উপাদান তৈরি করেন, আপনি হ্যান্ডলারটি পাস করতে পারেন এবং প্রপসকে আর্গুমেন্ট হিসাবে ব্যবহার করতে পারেন যা প্রপস পরিবর্তিত হলেই পুনরায় রেন্ডার হবে (কারণ হ্যান্ডলারের রেফারেন্সটি এখন কখনও পরিবর্তন হয় না):

উপ-কম্পোনেন্ট

class TableHeader extends Component {
  handleClick = () => {
    this.props.onHeaderClick(this.props.value);
  }

  render() {
    return (
      <th onClick={this.handleClick}>
        {this.props.column}
      </th>
    );
  }
}

প্রধান উপাদান

{this.props.defaultColumns.map((column) => (
  <TableHeader
    value={column}
    onHeaderClick={this.handleSort}
  />
))}

---

ওল্ড ইজি ওয়ে (ES5)

.bindআপনি যে প্যারামিটারটি চান তা পাস করতে ব্যবহার করুন :

return (
  <th value={column} onClick={that.handleSort.bind(that, column)}>{column}</th>
);

Comments

প্রতিক্রিয়া সতর্কতা দেয় যখন আমি আপনার কোডের মতো ব্যবহার করি। আমি আমার কোড অনক্লিক = {that.onClick.bind (নাল, কলাম)

— to

আপনি কীভাবে একটি <a>ট্যাগ দিয়ে এটি ব্যবহার করবেন যেখানে আপনার ইভেন্টটি পাস করতে হবে, ব্যবহারের জন্যpreventDefault()

— সাইমন এইচ

@ সিমোনএইচ আপনার পক্ষে যুক্তিগুলি পেরিয়ে যাওয়ার পরে ইভেন্টটি শেষ যুক্তি হিসাবে শেষ হবে bind।

— ছাপ

এটি কি পারফরম্যান্সের জন্য খারাপ নয়? প্রতিটি রেন্ডারে নতুন ফাংশন তৈরি করা যাবে না?

— অ্যান্ড্রুএমসিএলাগান

নিবন্ধন করুন আমি এটি নিয়ম এবং সর্বাধিক পারফরম্যান্ট সমাধান বর্ণনা করতে পেয়েছি ।

— ই সুন্দিন

Answer 2

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

ES5:

handleChange(param) { // param is the argument you passed to the function
    return function (e) { // e is the event object that returned

    };
}

ES6:

handleChange = param => e => {
    // param is the argument you passed to the function
    // e is the event object that returned
};

এবং আপনি এটি এইভাবে ব্যবহার করবেন:

<input 
    type="text" 
    onChange={this.handleChange(someParam)} 
/>

এই ধরনের ব্যবহারের একটি সম্পূর্ণ উদাহরণ এখানে:

const someArr = ["A", "B", "C", "D"];

class App extends React.Component {
  state = {
    valueA: "",
    valueB: "some initial value",
    valueC: "",
    valueD: "blah blah"
  };

  handleChange = param => e => {
    const nextValue = e.target.value;
    this.setState({ ["value" + param]: nextValue });
  };

  render() {
    return (
      <div>
        {someArr.map(obj => {
          return (
            <div>
              <label>
                {`input ${obj}   `}
              </label>
              <input
                type="text"
                value={this.state["value" + obj]}
                onChange={this.handleChange(obj)}
              />
              <br />
              <br />
            </div>
          );
        })}
      </div>
    );
  }
}

const rootElement = document.getElementById("root");
ReactDOM.render(<App />, rootElement);

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react-dom.min.js"></script>
<div id="root"></div>

নোট করুন যে এই পদ্ধতির প্রতিটি রেন্ডারে নতুন উদাহরণ তৈরির সমাধান হয় না।
আমি অন্যান্য ইনলাইন হ্যান্ডলারের উপর এই পদ্ধতির পছন্দ করি কারণ এটি আমার মতে আরও সংক্ষিপ্ত এবং পাঠযোগ্য।

সম্পাদনা করুন:
নীচের মন্তব্যে প্রস্তাবিত হিসাবে, আপনি ফাংশনটির ফলাফল ক্যাশে / স্মরণ করতে পারেন।

এখানে একটি নিষ্পাপ বাস্তবায়ন:

let memo = {};

const someArr = ["A", "B", "C", "D"];

class App extends React.Component {
  state = {
    valueA: "",
    valueB: "some initial value",
    valueC: "",
    valueD: "blah blah"
  };

  handleChange = param => {
    const handler = e => {
      const nextValue = e.target.value;
      this.setState({ ["value" + param]: nextValue });
    }
    if (!memo[param]) {
      memo[param] = e => handler(e)
    }
    return memo[param]
  };

  render() {
    return (
      <div>
        {someArr.map(obj => {
          return (
            <div key={obj}>
              <label>
                {`input ${obj}   `}
              </label>
              <input
                type="text"
                value={this.state["value" + obj]}
                onChange={this.handleChange(obj)}
              />
              <br />
              <br />
            </div>
          );
        })}
      </div>
    );
  }
}

const rootElement = document.getElementById("root");
ReactDOM.render(<App />, rootElement);

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react-dom.min.js"></script>
<div id="root" />

Comments

এটি গ্রহণযোগ্য উত্তর হওয়া উচিত। বাস্তবায়িত করা সত্যিই সহজ এবং আপনার অন্য কোনও উপাদান তৈরি করতে বা আলাদাভাবে বাঁধতে হবে না। ধন্যবাদ!

— ট্যাম্ব

দেখতে আরও ভাল দেখাচ্ছে, তবে পারফরম্যান্সের দৃষ্টিকোণ থেকে, কারিঙ করা সত্যিই সহায়তা করে না, কারণ আপনি যদি একই প্যারামের সাহায্যে হ্যান্ডেল চেঞ্জকে দু'বার কল করেন তবে আপনি দুটি ফাংশন পান যা জেএস ইঞ্জিন পৃথক বস্তু হিসাবে বিবেচনা করে, এমনকি তারা একই জিনিস করলেও । সুতরাং আপনি এখনও একটি রি-রেন্ডার পেতে। পারফরম্যান্সের স্বার্থে, পারফরম্যান্সের সুবিধা পেতে আপনাকে হ্যান্ডেল চেঞ্জের ফলাফলগুলি ক্যাশে করতে হবে। লাইকhandleChange = param => cache[param] || (e => { // the function body })

— ট্র্যাভেলিংপ্রাগ ২

আপনি যদি @ ট্র্যাভেলিংপ্রোগের পরামর্শটি পূরণ করেন তবে এটিই সঠিক উত্তর

— llioor

এই ক্যাচিং প্রক্রিয়াটি কীভাবে কাজ করে কেউ লিঙ্ক সরবরাহ করতে বা ব্যাখ্যা করতে পারেন? ধন্যবাদ।

— সাদোক এমটিয়ার

সুন্দর এবং ঝরঝরে!

— হাতেম আলিমাম

Answer 3

আজকাল, ES6 এর সাথে, আমি মনে করি আমরা একটি আপডেট করা উত্তর ব্যবহার করতে পারি।

return (
  <th value={column} onClick={()=>this.handleSort(column)} >{column}</th>
);

মূলত, (যে কেউ জানেন না তাদের জন্য) যেহেতু onClickএটির কোনও ফাংশনটি পাস হওয়ার প্রত্যাশা করছে, bindকাজ করে কারণ এটি কোনও ফাংশনের অনুলিপি তৈরি করে। পরিবর্তে আমরা একটি তীর ফাংশন এক্সপ্রেশনটি পাস করতে পারি যা কেবল আমাদের চাইলে ফাংশনটি সংরক্ষণ করে এবং সংরক্ষণ করে this। renderপ্রতিক্রিয়াতে আপনাকে কখনই পদ্ধতিটিকে আবদ্ধ করতে হবে না , তবে যদি কোনও কারণে আপনি thisআপনার উপাদান উপাদানগুলির মধ্যে একটিতে হারাচ্ছেন :

constructor(props) {
  super(props);
  this.myMethod = this.myMethod.bind(this);
}

Comments

আপনাকে কখনই বাঁধতে হবে না render()কারণ এটি প্রতিক্রিয়া বলে। যদি কিছু হয় bindতবে আপনার ইভেন্ট হ্যান্ডলারগুলির প্রয়োজন, এবং কেবল যখন আপনি তীর ব্যবহার করছেন না।

— ড্যান আব্রামভ

@ ড্যানআব্রামভ আমি মনে করি আপনি সঠিক, তবে আমি এটিকে কেবল ক্ষেত্রে অন্তর্ভুক্ত করেছি - এমন উদাহরণ দিয়ে আপডেট করেছি যা বাধ্যতামূলকভাবে রেন্ডারকে উত্সাহ দেয় না।

— আইকেরু

নোট করুন কনস্ট্রাক্টরের সময় পাস propsকরা ভাল super()বা this.propsসংজ্ঞায়িত হবে যা বিভ্রান্ত হতে পারে।

— ড্যান আব্রামভ

কি অর্জন? আপনি কার্যক্ষম উপাদানটির ভিতরে কোনও হ্যান্ডলার সংজ্ঞায়িত করতে পারেন এবং এটি পাস করতে পারেন। এটি প্রতিটি রেন্ডারে আলাদা ফাংশন হবে তাই আপনি যদি কোনও প্রোফাইলারের সাথে স্থির করে থাকেন যে এটি আপনাকে পারফেক্ট ইস্যু দেয় (এবং কেবলমাত্র আপনি যদি এটির ব্যাপারে নিশ্চিত হন তবেই!) পরিবর্তে কোনও শ্রেণি ব্যবহারের কথা বিবেচনা করুন।

— ড্যান আব্রামভ

@ me-me হ্যাঁ, এবং আপনি যদি বাবেলের প্রান্তে জাভাস্ক্রিপ্টের রক্তপাতের বিকল্প বেছে নেন foo = () => {...}তবে আপনার ক্লাসে যেমন বৈশিষ্ট্যগুলি ঘোষণা করা উচিত এবং তারপরে <button onClick={this.foo}...কোনও তীর ফাংশন অন্তর্ভুক্ত করার একমাত্র কারণ হিসাবে উল্লেখ করা উচিত, যদি আপনি এইভাবে বাবেল ব্যবহার করেন, আইএমও, আপনি যদি এমন কিছু পরিবর্তনশীল ক্যাপচার করতে চান যা কেবল রেন্ডার () পদ্ধতি স্কোপে বিদ্যমান থাকে (ইভেন্টগুলি কেবল পাশ দিয়ে যায় এবং প্রয়োগ হয় না)।

— আইকেরু

Answer 4

[[এইচ / টি @ ই.সুনডিন টু এটিকে একটি মন্তব্যে লিঙ্ক করার জন্য ]

শীর্ষের উত্তর (বেনামে ফাংশন বা বাঁধাই করা) কাজ করবে তবে এটি সর্বাধিক পারফরম্যান্ট নয়, কারণ এটি map()ফাংশন দ্বারা উত্পন্ন প্রতিটি ঘটনার জন্য ইভেন্ট হ্যান্ডলারের একটি অনুলিপি তৈরি করে ।

এটি ইএসলিন্ট-প্লাগইন-প্রতিক্রিয়া থেকে এটি করার সর্বোত্তম উপায়ের ব্যাখ্যা :

আইটেমের তালিকা

রেন্ডার ইন বাইন্ডের একটি সাধারণ ব্যবহারের তালিকাটি যখন কোনও তালিকা সরবরাহ করে তখন প্রতি আইটেমের জন্য পৃথক কলব্যাক থাকে:

const List = props => (
      <ul>
        {props.items.map(item =>
          <li key={item.id} onClick={() => console.log(item.id)}>
            ...
          </li>
        )}
      </ul>
    );

এইভাবে এটি করার পরিবর্তে, পুনরাবৃত্তি বিভাগটিকে তার নিজস্ব উপাদানটিতে টানুন:

const List = props => (
      <ul>
        {props.items.map(item =>
          <ListItem 
            key={item.id} 
            item={item} 
            onItemClick={props.onItemClick} // assume this is passed down to List
           />
        )}
      </ul>
    );


const ListItem = props => {
  const _onClick = () => {
    console.log(props.item.id);
  }
    return (
      <li onClick={_onClick}>
        ...
      </li>
    );

});

এটি রেন্ডারিংকে ত্বরান্বিত করবে, কারণ এটি প্রতিটি রেন্ডারে নতুন ফাংশন (বাইন্ড কলগুলির মাধ্যমে) তৈরি করার প্রয়োজনীয়তা এড়ায়।

Comments

প্রতিক্রিয়া কি সেই ফাংশনগুলিকে কল / প্রয়োগের সাথে ডাকে, তারপরে হুডের নীচে এবং অভ্যন্তরীণভাবে বাইন্ড ব্যবহার করা এড়ানো যায়?

— আইকেরু

স্টেটহীন উপাদান ব্যবহার করে এটি করার কোনও উপায় আছে কি?

— কার্লোস মার্টিনেজ

@ কার্লোস মার্টিনেজ ভালো নজর রাখুন, উদাহরণটি আমি আপডেট করেছি - তাদের উচিত ছিল স্টেটলেস ফাংশনাল উপাদান (এসএফসি) প্রথম জায়গায়। সাধারণত, যদি কোনও উপাদান কখনও ব্যবহার না করে তবে this.stateআপনি এটি নিরাপদে কোনও এসএফসি দিয়ে সরিয়ে নিতে পারবেন।

— ব্র্যান্ডন

হুম, আমি কীভাবে এটি আরও পারফর্ম্যান্ট হয় না? তালিকার আইটেমটি প্রতিবারই আহ্বান করা হবে না এবং এভাবে প্রতিটি রেন্ডারটিতে _অনলিক ক্লিক করা হবে।

— ম্যাটিয়াস পেটার জোহানসন

আমি এখানে একজন বিশেষজ্ঞের থেকে অনেক দূরে, তবে আমি বুঝতে পেরেছি যে, 'সঠিক' প্যাটার্নে, হ্যান্ডলারটির কেবলমাত্র একটি উদাহরণ রয়েছে এবং এটি উপাদানটির যেকোন উদাহরণের জন্য এটি প্রপসটি পাস করেছে। বাইন্ড উদাহরণে (যেমন, 'ভুল' প্যাটার্ন), প্রতিটি তাত্ক্ষণিক উপাদানগুলির জন্য হ্যান্ডলারের একটি উদাহরণ রয়েছে। এটি একই ক্রিয়াকলাপের ত্রিশ বার ভাইস একবার লিখে এবং এটি প্রয়োজনে কল করার সমান মেমরির সমতুল্য।

— ব্র্যান্ডন

Answer 5

এটি আমার পদ্ধতির, এটি কতটা খারাপ তা নিশ্চিত নয়, দয়া করে মন্তব্য করুন

ক্লিকযোগ্য উপাদানটিতে

return (
    <th value={column} onClick={that.handleSort} data-column={column}>   {column}</th>
);

এবং তারপর

handleSort(e){
    this.sortOn(e.currentTarget.getAttribute('data-column'));
}

Comments

এটি এমন একটি দৃষ্টিভঙ্গি যা আমি ভাবছিলাম, এটি কিছুটা হ্যাকি বোধ করে তবে একটি নতুন উপাদান তৈরি করা এড়িয়ে যায়। আমি নিশ্চিত না যে getAttribute পৃথক উপাদানগুলিতে টানানোর তুলনায় আরও ভাল বা খারাপ পারফেক্ট-ওয়াস কিনা।

— কামরানিকাস

আমি মনে করি এটি একটি ভাল সমাধান কারণ এটি খুব সহজ। তবে এটি কেবল স্ট্রিং মানগুলির সাথে কাজ করে, আপনি যদি কোনও বস্তু চান তবে এটি কাজ করে না।

— স্টিফেন এল

কোনও বস্তুর জন্য আপনাকে যা করতে হবে encodeURIComponent(JSON.stringify(myObj)), তারপরে এটি বিশ্লেষণ করতে হবে JSON.parse(decodeURIComponent(myObj))। ফাংশনগুলির জন্য আমি পুরোপুরি নিশ্চিত যে এই অভ্যাসটি ইওল বা নতুন ফাংশন () ছাড়াই কাজ করবে, উভয়ই এড়ানো উচিত। এই কারণে আমি প্রতিক্রিয়া / জেএসে ডেটা পাস করার জন্য ডেটা-অ্যাট্রিবিউট ব্যবহার করি না।

— সলভিটিগ

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

— যেমনটি

আধুনিক ব্রাউজারগুলিতে (আইই 11 সহ) সরাসরি এই উপায়ে ডেটাসেট অ্যাক্সেস করা যায়: e.currentTarget.dataset.column

— gsziszi

Answer 6

এই উদাহরণটি আপনার থেকে কিছুটা আলাদা হতে পারে। তবে আমি আপনাকে আশ্বস্ত করতে পারি যে এটিই এই সমস্যার জন্য আপনার পক্ষে সেরা সমাধান হতে পারে। আমি কোনও সমাধানের জন্য দিনগুলি অনুসন্ধান করেছি যার কোনও কার্য সম্পাদনের সমস্যা নেই। এবং অবশেষে এই এক সঙ্গে আসে।

class HtmlComponent extends React.Component {
  constructor() {
    super();
    this.state={
       name:'MrRehman',
    };
    this.handleClick= this.handleClick.bind(this);
  }

  handleClick(event) {
    const { param } = e.target.dataset;
    console.log(param);
    //do what you want to do with the parameter
  }

  render() {
    return (
      <div>
        <h3 data-param="value what you wanted to pass" onClick={this.handleClick}>
          {this.state.name}
        </h3>
      </div>
    );
  }
}

হালনাগাদ

যদি আপনি যে বিষয়গুলিকে পরামিতি বলে মনে করেন তাদের সাথে ডিল করতে চান inc আপনি JSON.stringify(object)এটিকে স্ট্রিংয়ে রূপান্তর করতে এবং ডেটা সেটে যুক্ত করতে পারেন।

return (
   <div>
     <h3 data-param={JSON.stringify({name:'me'})} onClick={this.handleClick}>
        {this.state.name}
     </h3>
   </div>
);

Comments

পাস করা ডেটা যখন কোনও বস্তু হয় তখন এটি কাজ করে না

— স্লিমসিম

সমস্যাটি সমাধান করতে JSON.stringify ব্যবহার করুন। @ স্লিমসিম এই কৌশলটি করা উচিত

— হান্নাদ রেহমান

এই সমস্যার জন্য যদি আপনার JSON.stringify ব্যবহার করা প্রয়োজন তবে এটি সম্ভবত সঠিক পদ্ধতি নয়। স্ট্রিংফিকেশন প্রক্রিয়া অনেক স্মৃতি লাগে takes

— কেএফই

বেশিরভাগ ক্ষেত্রে আপনি কেবলমাত্র প্যারাম হিসাবে আইডি পাস করবেন এবং আপনার উত্স অবজেক্ট থেকে সেই আইডির ভিত্তিতে অবজেক্টের বিশদটি পাবেন। এবং কেন এবং কীভাবে এটি প্রচুর মেমরি লাগে, আমি জানি জেএসএন স্ট্রিংফাইটি ধীর, তবে ক্লিক করুন Fn অ্যাসিঙ্ক এবং এটি একবার তৈরি করা

— ডোমের

Answer 7

class extends React.Component {
    onClickDiv = (column) => {
        // do stuff
    }
    render() {
        return <div onClick={() => this.onClickDiv('123')} />
    }
}

Comments

একই - প্রতিটি রেন্ডারে নতুন ডোম। সুতরাং প্রতিক্রিয়া প্রতিবার DOM আপডেট করবে।

— অ্যালেক্স শোয়ার্ক

Answer 8

জড়িত না হওয়া .bindবা ES6 এর আর একটি বিকল্প হ'ল হ্যান্ডলারের সাথে সন্তানের উপাদান ব্যবহার করে প্রয়োজনীয় প্রপস সহ পিতা বা মাতা হ্যান্ডলারকে কল করতে। এখানে একটি উদাহরণ (এবং কার্যকারী উদাহরণের একটি লিঙ্ক নীচে রয়েছে):

var HeaderRows = React.createClass({
  handleSort:  function(value) {
     console.log(value);
  },
  render: function () {
      var that = this;
      return(
          <tr>
              {this.props.defaultColumns.map(function (column) {
                  return (
                      <TableHeader value={column} onClick={that.handleSort} >
                        {column}
                      </TableHeader>
                  );
              })}
              {this.props.externalColumns.map(function (column) {
                  // Multi dimension array - 0 is column name
                  var externalColumnName = column[0];
                  return ( <th>{externalColumnName}</th>
                  );
              })}
          </tr>);
      )
  }
});

// A child component to pass the props back to the parent handler
var TableHeader = React.createClass({
  propTypes: {
    value: React.PropTypes.string,
    onClick: React.PropTypes.func
  },
  render: function () {
    return (
      <th value={this.props.value} onClick={this._handleClick}
        {this.props.children}
      </th>
    )        
  },
  _handleClick: function () {
    if (this.props.onClick) {
      this.props.onClick(this.props.value);
    }
  }
});

মূল ধারণাটি পিতামাতার উপাদানটির জন্য কোনও onClickফাংশনটি কোনও শিশু উপাদানগুলিতে প্রেরণ করা হয় । সন্তানের উপাদানটি onClickফাংশনটি কল করে এবং এতে যে কোনও propsপাস করা অ্যাক্সেস করতে পারে (এবংevent ) , যা আপনাকে eventপিতামাতার onClickফাংশনের মধ্যে কোনও মান বা অন্যান্য প্রপস ব্যবহার করতে দেয় ।

এখানে একটি কোডপেন ডেমো কার্যকরভাবে এই পদ্ধতিটি দেখায়।

Answer 9

আমি বুঝতে পারলাম এটি পার্টিতে দেরি হয়ে গেছে, তবে আমি মনে করি একটি সহজ সমাধান অনেকগুলি ব্যবহারের ক্ষেত্রে সন্তুষ্ট হতে পারে:

    handleEdit(event) {
        let value = event.target.value;
    }

    ...

    <button
        value={post.id}
        onClick={this.handleEdit} >Edit</button>

আমি মনে করি আপনি কোনও data-বৈশিষ্ট্যও ব্যবহার করতে পারেন ।

সাধারণ, শব্দার্থক।

Answer 10

কেবল এই জাতীয় একটি ফাংশন তৈরি করুন

  function methodName(params) {
    //the thing  you wanna do
  }

এবং এটি আপনার প্রয়োজন জায়গায় কল করুন

<আইকন অনক্লিক = {() => {মেথড নেম (দ্য পারমস ইউভান্টটোপাস); }} />

Answer 11

ই.প্রিভেন্টডেফল্ট () কল সহ ওপি-র প্রশ্নের উত্তর দেওয়ার বিকল্প প্রচেষ্টা করা:

রেন্ডার লিংক ( ES6 )

<a href="#link" onClick={(e) => this.handleSort(e, 'myParam')}>

উপাদান ফাংশন

handleSort = (e, param) => {
  e.preventDefault();
  console.log('Sorting by: ' + param)
}

Answer 12

আপনি যদি এটি ব্যবহার করেন তবে আপনি এটি করতে পারেন ES6।

export default class Container extends Component {
  state = {
    data: [
        // ...
    ]
  }

  handleItemChange = (e, data) => {
      // here the data is available 
      // ....
  }
  render () {
     return (
        <div>
        {
           this.state.data.map((item, index) => (
              <div key={index}>
                  <Input onChange={(event) => this.handItemChange(event, 
                         item)} value={item.value}/>
              </div>
           ))
        }
        </div>
     );
   }
 }

Answer 13

নীচে বর্ণিত হিসাবে প্রধান থেকে সাব উপাদানগুলিতে প্যারামিটার হিসাবে গণনা পাস করে একটি অবজেক্ট থেকে মোট গণনা দেখানো হচ্ছে।

এখানে মেইনকমম্পোনেন্ট.জেএস

import React, { Component } from "react";

import SubComp from "./subcomponent";

class App extends Component {

  getTotalCount = (count) => {
    this.setState({
      total: this.state.total + count
    })
  };

  state = {
    total: 0
  };

  render() {
    const someData = [
      { name: "one", count: 200 },
      { name: "two", count: 100 },
      { name: "three", count: 50 }
    ];
    return (
      <div className="App">
        {someData.map((nameAndCount, i) => {
          return (
            <SubComp
              getTotal={this.getTotalCount}
              name={nameAndCount.name}
              count={nameAndCount.count}
              key={i}
            />
          );
        })}
        <h1>Total Count: {this.state.total}</h1>
      </div>
    );
  }
}

export default App;

এবং এখানে SubComp.js

import React, { Component } from 'react';
export default class SubComp extends Component {

  calculateTotal = () =>{
    this.props.getTotal(this.props.count);
  }

  render() {
    return (
      <div>
        <p onClick={this.calculateTotal}> Name: {this.props.name} || Count: {this.props.count}</p>
      </div>
    )
  }
};

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

Answer 14

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

const DataButton = withData('button')
const DataInput = withData('input');

অথবা উপাদান এবং ফাংশন জন্য

const DataInput = withData(SomeComponent);

বা আপনি যদি পছন্দ করেন

const DataButton = withData(<button/>)

ঘোষণা করুন যে আপনার ধারক বাহিরের বাইরে (আপনার আমদানির নিকটবর্তী)

এখানে একটি ধারক ব্যবহার করা হয়:

import withData from './withData';
const DataInput = withData('input');

export default class Container extends Component {
    state = {
         data: [
             // ...
         ]
    }

    handleItemChange = (e, data) => {
        // here the data is available 
        // ....
    }

    render () {
        return (
            <div>
                {
                    this.state.data.map((item, index) => (
                        <div key={index}>
                            <DataInput data={item} onChange={this.handleItemChange} value={item.value}/>
                        </div>
                    ))
                }
            </div>
        );
    }
}

এখানে ডেটা.জেএস সহ র‍্যাপার কোডটি রয়েছে:

import React, { Component } from 'react';

const defaultOptions = {
    events: undefined,
}

export default (Target, options) => {
    Target = React.isValidElement(Target) ? Target.type : Target;
    options = { ...defaultOptions, ...options }

    class WithData extends Component {
        constructor(props, context){
            super(props, context);
            this.handlers = getHandlers(options.events, this);        
        }

        render() {
            const { data, children, ...props } = this.props;
            return <Target {...props} {...this.handlers} >{children}</Target>;
        }

        static displayName = `withData(${Target.displayName || Target.name || 'Component'})`
    }

    return WithData;
}

function getHandlers(events, thisContext) {
    if(!events)
        events = Object.keys(thisContext.props).filter(prop => prop.startsWith('on') && typeof thisContext.props[prop] === 'function')
    else if (typeof events === 'string')
        events = [events];

    return events.reduce((result, eventType) => {
        result[eventType] = (...args) => thisContext.props[eventType](...args, thisContext.props.data);
        return result;
    }, {});
}

Answer 15

জেএসএক্স অনক্লিক ইভেন্টগুলিতে আমার কাছে এর নীচে 3 টি পরামর্শ রয়েছে -

1. আসলে, আমাদের কোডে আমাদের .bind () বা তীর ফাংশনটি ব্যবহার করার দরকার নেই। আপনি আপনার কোড সহজ ব্যবহার করতে পারেন।

2. পারফরম্যান্সের উন্নতি করতে আপনি ক্লিক ইভেন্টটি ও (বা উল) থেকে ট্র (বা লি) তেও যেতে পারেন। মূলত আপনার এন লি উপাদানটির জন্য আপনার "ইভেন্ট শ্রোতাদের" সংখ্যা থাকবে।

   So finally code will look like this:
   <ul onClick={this.onItemClick}>
       {this.props.items.map(item =>
              <li key={item.id} data-itemid={item.id}>
                  ...
              </li>
         )}
   </ul>

   // আর আপনি অ্যাক্সেস করতে পারেন item.idমধ্যে onItemClickপদ্ধতি হিসাবে নিচে দেখানো:

   onItemClick = (event) => {
      console.log(e.target.getAttribute("item.id"));
   }

3. আমি তালিকা এবং আইটেমের জন্য পৃথক প্রতিক্রিয়া উপাদান তৈরি করার জন্য উপরে বর্ণিত পদ্ধতির সাথে একমত agree এই মেক কোডটি ভাল দেখাচ্ছে তবে আপনার যদি 1000 এর লি থাকে তবে 1000 ইভেন্ট শ্রোতার তৈরি হবে। দয়া করে নিশ্চিত হন যে আপনার বেশি ইভেন্ট শ্রোতা না থাকা উচিত।

   import React from "react";
   import ListItem from "./ListItem";
   export default class List extends React.Component {
   
       /**
       * This List react component is generic component which take props as list of items and also provide onlick
       * callback name handleItemClick
       * @param {String} item - item object passed to caller
       */
       handleItemClick = (item) => {
           if (this.props.onItemClick) {
               this.props.onItemClick(item);
           }
       }
   
       /**
       * render method will take list of items as a props and include ListItem component
       * @returns {string} - return the list of items
       */
       render() {
           return (
               <div>
                 {this.props.items.map(item =>
                     <ListItem key={item.id} item={item} onItemClick={this.handleItemClick}/>
                 )}
               </div>
           );
       }
   
   }
   
   
   import React from "react";
   
   export default class ListItem extends React.Component {
       /**
       * This List react component is generic component which take props as item and also provide onlick
       * callback name handleItemClick
       * @param {String} item - item object passed to caller
       */
       handleItemClick = () => {
           if (this.props.item && this.props.onItemClick) {
               this.props.onItemClick(this.props.item);
           }
       }
       /**
       * render method will take item as a props and print in li
       * @returns {string} - return the list of items
       */
       render() {
           return (
               <li key={this.props.item.id} onClick={this.handleItemClick}>{this.props.item.text}</li>
           );
       }
   }

Comments

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

— স্লিমসিম

Answer 16

আমি পদ্ধতিটিতে অনক্লিক ইভেন্ট মান পাসের জন্য কোডটি দুটি উপায়ে যুক্ত করেছি। ঘ। বাইন্ড পদ্ধতি 2 ব্যবহার করে তীর (=>) পদ্ধতি ব্যবহার করে। পদ্ধতিগুলি হ্যান্ডলসোর্ট 1 এবং হ্যান্ডলসোর্ট দেখুন

var HeaderRows  = React.createClass({
    getInitialState : function() {
      return ({
        defaultColumns : ["col1","col2","col2","col3","col4","col5" ],
        externalColumns : ["ecol1","ecol2","ecol2","ecol3","ecol4","ecol5" ],

      })
    },
    handleSort:  function(column,that) {
       console.log(column);
       alert(""+JSON.stringify(column));
    },
    handleSort1:  function(column) {
       console.log(column);
       alert(""+JSON.stringify(column));
    },
    render: function () {
        var that = this;
        return(
        <div>
            <div>Using bind method</div>
            {this.state.defaultColumns.map(function (column) {
                return (
                    <div value={column} style={{height : '40' }}onClick={that.handleSort.bind(that,column)} >{column}</div>
                );
            })}
            <div>Using Arrow method</div>

            {this.state.defaultColumns.map(function (column) {
                return (
                    <div value={column} style={{height : 40}} onClick={() => that.handleSort1(column)} >{column}</div>

                );
            })}
            {this.state.externalColumns.map(function (column) {
                // Multi dimension array - 0 is column name
                var externalColumnName = column;
                return (<div><span>{externalColumnName}</span></div>
                );
            })}

        </div>);
    }
});

Answer 17

নীচে উদাহরণটি যা অনক্লিক ইভেন্টে মান পাস করে।

আমি এস 6 সিনট্যাক্স ব্যবহার করেছি। মনে রাখবেন শ্রেণীর উপাদান তীর ফাংশনটি স্বয়ংক্রিয়ভাবে আবদ্ধ হয় না, সুতরাং নির্মাত্রে সুস্পষ্টভাবে আবদ্ধ হয়।

class HeaderRows extends React.Component {

    constructor(props) {
        super(props);
        this.handleSort = this.handleSort.bind(this);
    }

    handleSort(value) {
        console.log(value);
    }

    render() {
        return(
            <tr>
                {this.props.defaultColumns.map( (column, index) =>
                    <th value={ column } 
                        key={ index } 
                        onClick={ () => this.handleSort(event.target.value) }>
                        { column }
                    </th>
                )}

                {this.props.externalColumns.map((column, index)  =>
                    <th value ={ column[0] }
                        key={ index }>
                        {column[0]}
                    </th>
                )}
            </tr>
         );
    }
}

Answer 18

আমি অনুমান করি যে পদ্ধতিটি আপনাকে প্রতিক্রিয়াটির শ্রেণীর উদাহরণের সাথে আবদ্ধ করতে হবে। প্রতিক্রিয়াতে সমস্ত পদ্ধতি আবদ্ধ করতে কোনও কনস্ট্রাক্টর ব্যবহার করা আরও নিরাপদ। আপনার ক্ষেত্রে আপনি যখন প্যারামিটারটি পদ্ধতিতে পাস করেন, প্রথম পরামিতিটি পদ্ধতির 'এই' প্রসঙ্গে বাঁধতে ব্যবহৃত হয়, সুতরাং আপনি পদ্ধতির অভ্যন্তরে মানটি অ্যাক্সেস করতে পারবেন না।

Answer 19

1. You just have to use an arrow function in the Onclick event like this: 

<th value={column} onClick={() => that.handleSort(theValue)} >{column}</th>

2.Then bind this in the constructor method:
    this.handleSort = this.handleSort.bind(this);

3.And finally get the value in the function:
  handleSort(theValue){
     console.log(theValue);
}

Answer 20

Theres 'খুব সহজ উপায়।

 onClick={this.toggleStart('xyz')} . 
  toggleStart= (data) => (e) =>{
     console.log('value is'+data);  
 }

Answer 21

class TableHeader extends Component {
  handleClick = (parameter,event) => {
console.log(parameter)
console.log(event)

  }

  render() {
    return (
      <button type="button" 
onClick={this.handleClick.bind(this,"dataOne")}>Send</button>
    );
  }
}

Comments

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

— শ্রী

Answer 22

এই প্রশ্নের কোথাও থেকে আসা, কিন্তু আমি মনে করি .bindকৌশলটি করবে will নীচের নমুনা কোড খুঁজুন।

const handleClick = (data) => {
    console.log(data)
}

<button onClick={handleClick.bind(null, { title: 'mytitle', id: '12345' })}>Login</button>

Answer 23

তীর ফাংশন ব্যবহার:

আপনাকে অবশ্যই দ্বিতীয় পর্যায়টি ইনস্টল করতে হবে:

এনপিএম ব্যাবেল-প্রসেট-পর্যায় -২ ইনস্টল করুন:

class App extends React.Component {
    constructor(props) {
        super(props);
        this.state = {
            value=0
        }
    }

    changeValue = (data) => (e) => {
        alert(data);  //10
        this.setState({ [value]: data })
    }

    render() {
        const data = 10;
        return (
            <div>
                <input type="button" onClick={this.changeValue(data)} />
            </div>
        );
    }
}
export default App; 

Answer 24

এটি পরিচালনা করার জন্য 3 টি উপায় রয়েছে: -

1. কন্সট্রাক্টরে পদ্ধতিটি এমনভাবে বাঁধুন: -

   export class HeaderRows extends Component {
      constructor() {
          super();
          this.handleSort = this.handleSort.bind(this);
      }
   }

2. তীর ফাংশনটি তৈরি করার সময় এটি ব্যবহার করুন: -

   handleSort = () => {
       // some text here
   }

3. তৃতীয় উপায় হ'ল: -

   <th value={column} onClick={() => that.handleSort} >{column}</th>

Answer 25

আপনি আপনার কোডটি এভাবে ব্যবহার করতে পারেন:

<th value={column} onClick={(e) => that.handleSort(e, column)} >{column}</th>

এখানে ইভেন্ট ইভেন্ট অবজেক্টের জন্য, আপনি যদি preventDefault()হ্যান্ডেল ফাংশনের মতো ইভেন্টের পদ্ধতিগুলি ব্যবহার করতে চান বা লক্ষ্য মান বা নাম পছন্দ করতে চান e.target.name।

Answer 26

আমি ট্যাগের বৈশিষ্ট্যটি যথেষ্ট যুক্তিসঙ্গত হিসাবে পারম পাস করার সমাধানটি পেয়েছি।

তবে এর সীমাবদ্ধতা রয়েছে:

• তালিকার আইটেমটিতে অন্য ট্যাগ থাকলে সঠিকভাবে কাজ করে না (এইভাবে ইভেন্ট.টারাগেট উদ্দেশ্য অনুযায়ী আলাদা হতে পারে)
• পরম কেবল একটি স্ট্রিং হতে পারে। সিরিয়ালাইজেশন এবং deserialization প্রয়োজন।

সে কারণেই আমি এই লাইব্রেরিটি নিয়ে এসেছি: প্রতিক্রিয়া-ইভেন্ট-পরম

এটা তোলে:

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

ব্যবহারের উদাহরণ:

import { setEventParam, getEventParam } from "react-event-param";

class List extends Component {
  onItemClick = e => {
    const index = getEventParam(e.target);
    // Do something with index
  };

  render() {
    return (
      <ul>
        {this.props.items.map((itemText, index) => (
          <li
            key={index}
            {...setEventParam(index)}
            onClick={this.onItemClick}
          >
            {{ itemText }}
          </li>
        ))}
      </ul>
    );
  }
}

export default List;

Answer 27

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

আসল কথা হচ্ছে, আমার কেবল একটি দরকার।
আমি হ্যান্ডলারটি টেবিল পর্যায়ে সেট করেছি (বা উল বা ওএল ...), এবং ক্লিকটি হয়ে গেলে আমি বলতে পারি ইভেন্ট আইটেমটিতে কোনও সময় থেকে উপলব্ধ ডেটা ব্যবহার করে ক্লিক করা ঘরটি ছিল:

nativeEvent.target.tagName
nativeEvent.target.parentElement.tagName 
nativeEvent.target.parentElement.rowIndex
nativeEvent.target.cellIndex
nativeEvent.target.textContent

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

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

Answer 28

ইভেন্ট হ্যান্ডলারগুলিতে প্যারামিটারটি পাস করার কয়েকটি উপায় রয়েছে, কিছু অনুসরণ করছেন।

আপনি ইভেন্ট হ্যান্ডলারের চারপাশে মোড়ানো এবং প্যারামিটারগুলি পাস করতে একটি তীর ফাংশন ব্যবহার করতে পারেন:

<button onClick={() => this.handleClick(id)} />

উপরের উদাহরণটি কল করার সমতুল্য .bindবা আপনি স্পষ্টভাবে বাইন্ড কল করতে পারেন।

<button onClick={this.handleClick.bind(this, id)} />

এই দুটি পদ্ধতির ব্যতীত, আপনি কারি ফাংশন হিসাবে সংজ্ঞায়িত কোনও ফাংশনেও যুক্তিগুলি পাস করতে পারেন।

handleClick = (id) => () => {
    console.log("Hello, your ticket number is", id)
};

<button onClick={this.handleClick(id)} />

Answer 29

একটি বন্ধ ব্যবহার করুন , এটি একটি পরিষ্কার সমাধানের ফলাফল:

<th onClick={this.handleSort(column)} >{column}</th>

হ্যান্ডেলসোর্ট ফাংশন এমন একটি ফাংশন ফিরিয়ে দেবে যা মান কলামটি ইতিমধ্যে সেট করেছে।

handleSort: function(value) { 
    return () => {
        console.log(value);
    }
}

বেনামে ফাংশনটি সঠিক মান দিয়ে ডাকা হবে যখন ব্যবহারকারী যখন তম ক্লিক করবেন।

উদাহরণ: https://stackblitz.com/edit/react-pass-paraامی- উদাহরণ

Answer 30

সাধারণ পরিবর্তিত প্রয়োজন:

ব্যবহার <th value={column} onClick={that.handleSort} >{column}</th>

পরিবর্তে <th value={column} onClick={that.handleSort} >{column}</th>