অনকায়ডাউন ইভেন্ট রিঅ্যাক্টে ডিভস-এ কাজ করছে না

Question

আমি প্রতিক্রিয়ার একটি ডিভিতে একটি কীডাউন ইভেন্ট ব্যবহার করতে চাই। আমি করি:

  componentWillMount() {
      document.addEventListener("keydown", this.onKeyPressed.bind(this));
  }

  componentWillUnmount() {
      document.removeEventListener("keydown", this.onKeyPressed.bind(this));
  }      

  onKeyPressed(e) {
    console.log(e.keyCode);
  }

  render() {
    let player = this.props.boards.dungeons[this.props.boards.currentBoard].player;
    return (
      <div 
        className="player"
        style={{ position: "absolute" }}
        onKeyDown={this.onKeyPressed} // not working
      >
        <div className="light-circle">
          <div className="image-wrapper">
            <img src={IMG_URL+player.img} />
          </div>
        </div>
      </div>
    )
  }

এটি দুর্দান্ত কাজ করে তবে আমি এটি প্রতিক্রিয়া শৈলীতে আরও করতে চাই। আমি চেষ্টা করেছিলাম

        onKeyDown={this.onKeyPressed}

উপাদান উপর। তবে তাতে কোনও প্রতিক্রিয়া হয় না। আমি স্মরণ করার সাথে সাথে এটি ইনপুট উপাদানগুলিতে কাজ করে।

কোডপেন

আমি এটা কিভাবে করবো?

Comments

ব্যক্তিগতভাবে আমি আপনার পদ্ধতির পছন্দ করি। এটি দস্তাবেজের কী স্ট্রোককে বেঁধে রাখার একটি ভাল পদ্ধতির মতো দেখায় যা আপনার উপাদানগুলির আওতার বাইরে। এবং কোনও নির্দিষ্ট উপাদানের উপর ফোকাসের প্রয়োজন হয় না।

— ড্যানিয়েল

Answer 1

প্রতিক্রিয়াতে কোনও ডিভিতেonKeyDown ইভেন্ট শোনার জন্য আপনার ট্যাব ইন্ডেক্স বৈশিষ্ট্যটি ব্যবহার করা উচিত । সেটিংটি tabIndex="0"আপনার হ্যান্ডলারের আগুন জ্বলতে পারে।

Comments

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

— উইল পি। ২

এটি আমার কাছে হ্যাক বা ওয়ার্কআরউন্ডের মতো আরও মনে হয়। এমন একটি সময় থাকতে পারে যখন আপনাকে প্রদত্ত ডিভ একটি ট্যাব অর্ডার বজায় রাখতে হবে।

— ই

tabIndex={-1}আপনি যদি এমন কোনও উপাদান দিয়ে কাজ করছেন যা ইন্টারেক্টিভ নয় এবং নথির ট্যাব ক্রমটি পরিবর্তন করতে না চান তবে এটি ব্যবহার করা যেতে পারে।

— IliasT

ডিভিউ ফোকাসযোগ্য করার জন্য আপনাকে ট্যাবআইন্ডেক্সটি সেট করতে হবে। আপনি ট্যাব-ইন্ডেক্সটি 0,1, -1 এ সেট করতে পারেন .... তবে এটি পরীক্ষা করার আগে আপনি webaim.org/techniques/keyboard/tabindex পরীক্ষা করে দেখুন আপনি সম্ভবত প্রোগ্রাম -1 এ হেরফের করছেন বলে আপনি সম্ভবত -1 এ সেট করতে চাইবেন ।

— কবিতা

কোনও কারণে এটি কেবল তখনই কাজ করে যদি আমার ট্যাবআইন্ডেক্সের সাথে ডিভের মধ্যে <ইনপুট> উপাদান থাকে। বা অন্য কিছু ফোকাস করা যেতে পারে। অন্যান্য ডিভগুলি সহ, এটি এখনও ক্যাপচার করছে না। কোন চিন্তা?

— ফ্লাউন

Answer 2

আপনার এটি এইভাবে লিখতে হবে

<div 
    className="player"
    style={{ position: "absolute" }}
    onKeyDown={this.onKeyPressed}
    tabIndex="0"
  >

যদি onKeyPressedআবদ্ধ না হয় thisতবে তীর ফাংশনটি ব্যবহার করে এটি পুনরায় লেখার চেষ্টা করুন বা উপাদানটিতে আবদ্ধ করুন constructor।

Comments

দুঃখিত আমি নিশ্চিত ছিলাম, আমি এটিকে কেবল উপেক্ষা করেছি। তবে এটি সমস্যা নয়। এটি এখনও কাজ করে না।

— মাইকেল

আপডেট উত্তর। আপনার হয় ডিভিতে ক্লিক করতে হবে বা কোনও কী টিপানোর আগে ফোকাসে আনতে হবে।

— প্যান্থার

আমি করেছিলাম. এটা কাজ করছে না. আমি উপরের কোডটি আপডেট করেছি। এটি DOM কমান্ডগুলির সাথে দুর্দান্ত কাজ করে, তবে প্রতিক্রিয়া শৈলীতে নয়।

— মাইকেল

আপনি কি ব্যাখ্যা করতে পারেন যা কাজ করছে না? আপনার ফাংশন কল হচ্ছে না বা আউটপুট console.logকিছুই না?

— প্যান্থার

ফাংশন বলা হয় না। আমার কাছে একটি কোডেপেন রয়েছে: codepen.io/lafisrap/pen/OmyBYG । এটি 275 এবং 307 লাইন সম্পর্কে

— মাইকেল

Answer 3

আপনি খাঁটি জাভাস্ক্রিপ্টে খুব বেশি ভাবছেন। আপনার শ্রোতাদের সেই প্রতিক্রিয়াজনিত লাইফসাইकल পদ্ধতিগুলি থেকে মুক্ত করুন এবং এর event.keyপরিবর্তে ব্যবহার করুন event.keyCode(কারণ এটি কোনও জেএস ইভেন্টের বিষয় নয়, এটি একটি প্রতিক্রিয়া সিন্থেটিক এভেন্ট )। আপনার সম্পূর্ণ উপাদানটি এটির মতো সহজ হতে পারে (ধরে নিবেন যে আপনি আপনার পদ্ধতিগুলি কোনও কনস্ট্রাক্টরে আবদ্ধ করেননি)।

onKeyPressed(e) {
  console.log(e.key);
}

render() {
  let player = this.props.boards.dungeons[this.props.boards.currentBoard].player;
  return (
    <div 
      className="player"
      style={{ position: "absolute" }}
      onKeyDown={this.onKeyPressed}
    >
      <div className="light-circle">
        <div className="image-wrapper">
          <img src={IMG_URL+player.img} />
        </div>
      </div>
    </div>
  )
}

Comments

ঠিক এটিই আমি এটি লিখতে চেয়েছিলাম। কিন্তু নরক, এটি যাচ্ছে না। এখানে কোডেপেন: codepen.io/lafisrap/pen/OmyBYG । আপনি যদি 275 লাইনে মন্তব্য করেন তবে কী বোর্ড ইনপুট (কার্সার কী) কাজ করছে না। onKeyDown 307 লাইনে রয়েছে

— মাইকেল

কী-কোড আমি কার্সার কীগুলির জন্য ব্যবহার করি কারণ তারা কোনও অক্ষর না দেয়।

— মাইকেল

প্রতিক্রিয়া জাভাস্ক্রিপ্ট ইভেন্ট অবজেক্ট ব্যবহার করে না, তাই কোনও কী কোডের সম্পত্তি নেই। এই eventবস্তুটি একটি প্রতিক্রিয়া সিন্থেটিক এভেন্ট ।

— ইস্পাত

@ মিশেল আমিও পুরোপুরি নিশ্চিত নই যে আপনি কীভাবে কোনও ডিভিতে কোনও মূল ইভেন্টটি ট্রিগার করছেন, তবে যখন আমি এই কোডটিকে হ্যান্ডলার onClickফায়ারের পরিবর্তে প্রপ দিয়ে একটি ফিডেলে রাখি onKeyDown।

— ইস্পাত

ধন্যবাদ এটি এটি ব্যাখ্যা করে ... মূল ইভেন্টগুলি ইনপুট ক্ষেত্রে যদিও কাজ করে।

— মাইকেল

Answer 4

সঙ্গে উত্তর

<div 
    className="player"
    onKeyDown={this.onKeyPressed}
    tabIndex={0}
>

আমার জন্য কাজ করে, দয়া করে নোট করুন যে ট্যাবআইন্ডেক্সে স্ট্রিং নয়, একটি সংখ্যা প্রয়োজন, তাই ট্যাবআইন্ডেক্স = "0" কাজ করে না।

Comments

অন্য উত্তর সম্পাদনা করতে পারে?

— রস অ্যাট্রিল

Answer 5

divকৌশলটি ব্যবহার করে tab_index="0"বা tabIndex="-1"কাজ করে, তবে যে কোনও সময় ব্যবহারকারী কোনও দৃষ্টিভঙ্গির দিকে মনোনিবেশ করছে যা কোনও উপাদান নয়, আপনি পুরো ওয়েবসাইটে একটি কুৎসিত ফোকাস-রূপরেখা পাবেন। outline: noneফোকাসে ডিভ ব্যবহারের জন্য সিএসএস সেট করে এটি ঠিক করা যেতে পারে ।

স্টাইলযুক্ত উপাদানগুলি সহ বাস্তবায়ন এখানে:

import styled from "styled-components"

const KeyReceiver = styled.div`
  &:focus {
    outline: none;
  }
`

এবং অ্যাপ্লিকেশন ক্লাসে:

  render() {
    return (      
      <KeyReceiver onKeyDown={this.handleKeyPress} tabIndex={-1}>
          Display stuff...
      </KeyReceiver>
    )

Answer 6

আপনি কনস্ট্রাক্টরে পদ্ধতিটির বাঁধাই মিস করছেন। প্রতিক্রিয়া আপনার পরামর্শ অনুযায়ী পরামর্শ দেয়:

class Whatever {
  constructor() {
    super();
    this.onKeyPressed = this.onKeyPressed.bind(this);
  }

  onKeyPressed(e) {
    // your code ...
  }

  render() {
    return (<div onKeyDown={this.onKeyPressed} />);
  }
}

এটি করার অন্যান্য উপায় রয়েছে তবে রানটাইম এ এটি সবচেয়ে দক্ষ হবে।

Answer 7

আপনাকে ডিফল্ট ইভেন্টটি ট্রিগার থেকে আটকাতে হবে।

onKeyPressed(e) {
   e.preventDefault();
   console.log(e.key);
}