ReactJS - উপাদানটিতে কাস্টম ইভেন্ট শ্রোতাদের যুক্ত করুন

Question 1

সাধারণ পুরানো জাভাস্ক্রিপ্টে আমার ডিআইভি আছে

<div class="movie" id="my_movie">

এবং নিম্নলিখিত জাভাস্ক্রিপ্ট কোড

var myMovie = document.getElementById('my_movie');
myMovie.addEventListener('nv-enter', function (event) {
     console.log('change scope');
});

এখন আমার একটি প্রতিক্রিয়া উপাদান রয়েছে, এই উপাদানটির ভিতরে, রেন্ডার পদ্ধতিতে, আমি আমার ডিভিটি ফিরিয়ে দিচ্ছি। আমি কীভাবে আমার কাস্টম ইভেন্টের জন্য ইভেন্ট শ্রোতা যুক্ত করতে পারি? (আমি এই লাইব্রেরিটি টিভি অ্যাপগুলির জন্য ব্যবহার করছি - নেভিগেশন )

import React, { Component } from 'react';

class MovieItem extends Component {

  render() {

    if(this.props.index === 0) {
      return (
        <div aria-nv-el aria-nv-el-current className="menu_item nv-default">
            <div className="indicator selected"></div>
            <div className="category">
                <span className="title">{this.props.movieItem.caption.toUpperCase()}</span>
            </div>
        </div>
      );
    }
    else {
      return (
        <div aria-nv-el className="menu_item nv-default">
            <div className="indicator selected"></div>
            <div className="category">
                <span className="title">{this.props.movieItem.caption.toUpperCase()}</span>
            </div>
        </div>
      );
    }
  }

}

export default MovieItem;

আপডেট # 1:

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

import React, { Component } from 'react';
import ReactDOM from 'react-dom';

class MenuItem extends Component {

  constructor(props) {
    super(props);
    // Pre-bind your event handler, or define it as a fat arrow in ES7/TS
    this.handleNVFocus = this.handleNVFocus.bind(this);
    this.handleNVEnter = this.handleNVEnter.bind(this);
    this.handleNVRight = this.handleNVRight.bind(this);
  }

  handleNVFocus = event => {
      console.log('Focused: ' + this.props.menuItem.caption.toUpperCase());
  }

  handleNVEnter = event => {
      console.log('Enter: ' + this.props.menuItem.caption.toUpperCase());
  }

  handleNVRight = event => {
      console.log('Right: ' + this.props.menuItem.caption.toUpperCase());
  }

  componentDidMount() {
    ReactDOM.findDOMNode(this).addEventListener('nv-focus', this.handleNVFocus);
    ReactDOM.findDOMNode(this).addEventListener('nv-enter', this.handleNVEnter);
    ReactDOM.findDOMNode(this).addEventListener('nv-right', this.handleNVEnter);
    //this.refs.nv.addEventListener('nv-focus', this.handleNVFocus);
    //this.refs.nv.addEventListener('nv-enter', this.handleNVEnter);
    //this.refs.nv.addEventListener('nv-right', this.handleNVEnter);
  }

  componentWillUnmount() {
    ReactDOM.findDOMNode(this).removeEventListener('nv-focus', this.handleNVFocus);
    ReactDOM.findDOMNode(this).removeEventListener('nv-enter', this.handleNVEnter);
    ReactDOM.findDOMNode(this).removeEventListener('nv-right', this.handleNVRight);
    //this.refs.nv.removeEventListener('nv-focus', this.handleNVFocus);
    //this.refs.nv.removeEventListener('nv-enter', this.handleNVEnter);
    //this.refs.nv.removeEventListener('nv-right', this.handleNVEnter);
  }

  render() {
    var attrs = this.props.index === 0 ? {"aria-nv-el-current": true} : {};
    return (
      <div ref="nv" aria-nv-el {...attrs} className="menu_item nv-default">
          <div className="indicator selected"></div>
          <div className="category">
              <span className="title">{this.props.menuItem.caption.toUpperCase()}</span>
          </div>
      </div>
    )
  }

}

export default MenuItem;

আমি কিছু লাইন মন্তব্য করে রেখেছি কারণ উভয় ক্ষেত্রেই আমি কনসোল লাইনগুলি লগ করতে সক্ষম হই না।

আপডেট # 2: এই নেভিগেশন লাইব্রেরিটি এর মূল এইচটিএমএল ট্যাগগুলির সাথে প্রতিক্রিয়া নিয়ে ভাল কাজ করে না, সুতরাং আমার বিকল্পগুলি সেট করতে হয়েছিল এবং আরিয়া- * ব্যবহার করার জন্য ট্যাগগুলির নাম পরিবর্তন করতে হয়েছিল যাতে এটি প্রতিক্রিয়াটির কোনও প্রভাব ফেলবে না।

navigation.setOption('prefix','aria-nv-el');
navigation.setOption('attrScope','aria-nv-scope');
navigation.setOption('attrScopeFOV','aria-nv-scope-fov');
navigation.setOption('attrScopeCurrent','aria-nv-scope-current');
navigation.setOption('attrElement','aria-nv-el');
navigation.setOption('attrElementFOV','aria-nv-el-fov');
navigation.setOption('attrElementCurrent','aria-nv-el-current');

Question 2

আপনার যদি ইতিমধ্যে প্রতিক্রিয়া দ্বারা সরবরাহ না করা DOM ইভেন্টগুলি পরিচালনা করতে হয় তবে উপাদানটি মাউন্ট হওয়ার পরে আপনাকে DOM শ্রোতাদের যুক্ত করতে হবে:

আপডেট: 13, 14 এবং 15 এর মধ্যে প্রতিক্রিয়াগুলির মধ্যে আমার উত্তরকে প্রভাবিত করে এমন এপিআইতে 15 টি পরিবর্তন করা হয়েছিল। প্রতিক্রিয়া 15 এবং ES7 ব্যবহারের নীচে সর্বশেষতম উপায় is পুরানো সংস্করণগুলির উত্তর ইতিহাস দেখুন ।

class MovieItem extends React.Component {

  componentDidMount() {
    // When the component is mounted, add your DOM listener to the "nv" elem.
    // (The "nv" elem is assigned in the render function.)
    this.nv.addEventListener("nv-enter", this.handleNvEnter);
  }

  componentWillUnmount() {
    // Make sure to remove the DOM listener when the component is unmounted.
    this.nv.removeEventListener("nv-enter", this.handleNvEnter);
  }

  // Use a class arrow function (ES7) for the handler. In ES6 you could bind()
  // a handler in the constructor.
  handleNvEnter = (event) => {
    console.log("Nv Enter:", event);
  }

  render() {
    // Here we render a single <div> and toggle the "aria-nv-el-current" attribute
    // using the attribute spread operator. This way only a single <div>
    // is ever mounted and we don't have to worry about adding/removing
    // a DOM listener every time the current index changes. The attrs 
    // are "spread" onto the <div> in the render function: {...attrs}
    const attrs = this.props.index === 0 ? {"aria-nv-el-current": true} : {};

    // Finally, render the div using a "ref" callback which assigns the mounted 
    // elem to a class property "nv" used to add the DOM listener to.
    return (
      <div ref={elem => this.nv = elem} aria-nv-el {...attrs} className="menu_item nv-default">
        ...
      </div>
    );
  }

}

কোডেপেন.ওয়ের উপর উদাহরণ

Question 3

আপনি কম্পোনেন্টডিডমাউন্ট এবং উপাদান- উইলআউনমাউন্ট পদ্ধতিগুলি ব্যবহার করতে পারেন :

import React, { Component } from 'react';
import ReactDOM from 'react-dom';

class MovieItem extends Component
{
    _handleNVEvent = event => {
        ...
    };

    componentDidMount() {
        ReactDOM.findDOMNode(this).addEventListener('nv-event', this._handleNVEvent);
    }

    componentWillUnmount() {
        ReactDOM.findDOMNode(this).removeEventListener('nv-event', this._handleNVEvent);
    }

    [...]

}

export default MovieItem;

Question 4

প্রথমে, কাস্টম ইভেন্টগুলি দেশীয়ভাবে প্রতিক্রিয়া উপাদানগুলির সাথে ভাল খেলেন না। সুতরাং আপনি <div onMyCustomEvent={something}>রেন্ডার ফাংশনটিতে কেবল বলতে পারবেন না, এবং সমস্যাটি সম্পর্কে ভাবতে হবে।

দ্বিতীয়ত, আপনি যে লাইব্রেরিটি ব্যবহার করছেন তার ডকুমেন্টেশনটি একবার দেখার পরে, ইভেন্টটি আসলে চালিত হয় document.body, সুতরাং এটি যদি কাজ না করে, আপনার ইভেন্ট হ্যান্ডলারটি কখনই ট্রিগার করতে পারে না।

পরিবর্তে, componentDidMountআপনার আবেদনের কোথাও ভিতরে , আপনি যোগ করে এনভি-এন্টার শুনতে পারেন

document.body.addEventListener('nv-enter', function (event) {
    // logic
});

তারপরে, কলব্যাক ফাংশনের অভ্যন্তরে এমন কোনও ফাংশন হিট করুন যা উপাদানটির অবস্থা বা আপনি যা করতে চান তা পরিবর্তন করে।