কীভাবে রিঅ্যাক্টজেএস-এ `onKeyPress` ইভেন্ট পরিচালনা করবেন?

Question

আমি কীভাবে onKeyPressইভেন্টটিকে রিএ্যাকটিজেএসে কাজ করতে পারি ? চাপলে এটি সতর্কতা অবলম্বন করা উচিত enter (keyCode=13)।

var Test = React.createClass({
    add: function(event){
        if(event.keyCode == 13){
            alert('Adding....');
        }
    },
    render: function(){
        return(
            <div>
                <input type="text" id="one" onKeyPress={this.add} />    
            </div>
        );
    }
});

React.render(<Test />, document.body);

Comments

যেহেতু v0.11 প্রতিক্রিয়া কী কোডগুলিকে পঠনযোগ্য স্ট্রিংগুলিতে স্বাভাবিক করে তোলে । আমি কী কোডগুলির পরিবর্তে সেগুলি ব্যবহার করার পরামর্শ দেব।

— র্যান্ডি মরিস

@ র্যান্ডি মরিস প্রতিক্রিয়া কী কোডগুলি সর্বদা সঠিকভাবে স্বাভাবিক করে না। "+" উত্পাদনের জন্য আপনাকে শিফটকে দিয়ে 187 এর মূল কোড মান প্রদান করবে = সত্য তবে "কী" মানটি "অজানা" হিসাবে সমাধান করবে।

— হের

Answer 1

আমি প্রতিক্রিয়া 0.14.7 সঙ্গে কাজ করছি, ব্যবহার onKeyPressএবং event.keyভাল কাজ করে।

handleKeyPress = (event) => {
  if(event.key === 'Enter'){
    console.log('enter press here! ')
  }
}
render: function(){
     return(
         <div>
           <input type="text" id="one" onKeyPress={this.handleKeyPress} />
        </div>
     );
}

Comments

এবং আপনি এটির সাথে পরীক্ষারগুলিতে এটির অনুরূপ করতে পারেন:Simulate.keyPress(ReactDOM.findDOMNode(component.refs.input),{key:"Enter"});

— sylvain

পরীক্ষামূলক বলতে কী বোঝ? আমি ভেবেছিলাম ES6 "ফাংশননেম (পরম) => {}" দিয়ে কাজ করবে?

— ওয়ালটারি

@ ওয়াল্টারি এটি ES6 তীর ফাংশন , যার অর্থfunction handleKeyPress(event){...}

— হ্যাভেন

এটি বাঁধেthis

— ভাটিয়া-পেরের

সম্ভবত এটি পেডেন্টিক, তবে এটি লক্ষণীয় যে কঠোর সাম্যতা ===পরীক্ষা করার জন্য এটি ব্যবহার করা ভাল event.key == 'Enter'।

— আলেকজান্ডার নিড

Answer 2

render: function(){
     return(
         <div>
           <input type="text" id="one" onKeyDown={this.add} />
        </div>
     );
}

onKeyDownkeyCodeইভেন্টগুলি সনাক্ত করে।

Comments

সাধারণত এন্টার কী হিসাবে কোনও জিনিস অনকায়ুপের মাধ্যমে সনাক্ত করা হয় - এটি যদি সিদ্ধান্ত নেয় তবে ব্যবহারকারী ইন্টারঅ্যাকশনটি বন্ধ করতে দেয়। কীপ্রেস বা কীডাউন ব্যবহার করে তাৎক্ষণিকভাবে কার্যকর করা হয়।

— আন্দ্রেয়াস

Answer 3

আমার জন্য সবসময় , কিন্তু সঠিক মান আছে। যদি সঠিক কোডটি ব্যবহার করা হয় ।onKeyPresse.keyCode0e.charCodeonKeyDowne.charCode

var Title = React.createClass({
    handleTest: function(e) {
      if (e.charCode == 13) {
        alert('Enter... (KeyPress, use charCode)');
      }
      if (e.keyCode == 13) {
        alert('Enter... (KeyDown, use keyCode)');
      }
    },
    render: function() {
      return(
        <div>
          <textarea onKeyPress={this.handleTest} />
        </div>
      );
    }
  });

কীবোর্ড ইভেন্টগুলি প্রতিক্রিয়া জানান ।

Comments

.. সুতরাং আপনি যদি তীরচিহ্নগুলি এবং / অথবা অন্যান্য অ-অক্ষর সংক্রান্ত কীগুলি ব্যবহার করতে আগ্রহী হন তবে onKeyDown আপনার জন্য কারণ তারা কীচর ছাড়া কোনও কী কোড দেয় না।

— অস্কারে

যারা নিজের প্রতিক্রিয়া কী চেষ্টা করে দেখতে আগ্রহী তাদের জন্য, আমি তৈরি একটি কোডস্যান্ডবক্স এখানে ।

— এলিয়েনকিভিন

Answer 4

কিপ্রেস ইভেন্টটি অবহেলা করা হয়েছে, পরিবর্তে আপনার কীডাউন ইভেন্টটি ব্যবহার করা উচিত।

https://developer.mozilla.org/en-US/docs/Web/API/Document/keypress_event

handleKeyDown(event) {
    if(event.keyCode === 13) { 
        console.log('Enter key pressed')
  }
}

render() { 
    return <input type="text" onKeyDown={this.handleKeyDown} /> 
}

Comments

এটি সমর্থন করে event.key === 'Enter'। এখানে একবার দেখুন ।

— মার্সেলোক্রোক

Answer 5

প্রতিক্রিয়া আপনাকে ভাবতে পারে এমন ধরণের ঘটনা আপনাকে দিচ্ছে না। বরং এটি সিন্থেটিক ইভেন্টগুলি পার করছে ।

একটি সংক্ষিপ্ত পরীক্ষায়, event.keyCode == 0সর্বদা সত্য। আপনি যা চান তা হ'লevent.charCode

Comments

এটি যদিও প্রশ্নের উপর প্রভাব ফেলছে না। এন্টার টিপলে এটি 13 এর সমান কিকোড পরিবর্তন করে না।

— টেকিলামন

আমি কেবল সিনথেটিক ফাংশনগুলি ফিরে পেতে e.key || e.keyCode || e.charCode

— থাকি

Answer 6

var Test = React.createClass({
     add: function(event){
         if(event.key === 'Enter'){
            alert('Adding....');
         }
     },
     render: function(){
        return(
           <div>
            <input type="text" id="one" onKeyPress={(event) => this.add(event)}/>    
          </div>
        );
     }
});

Answer 7

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

<Input 
  onKeyPress={(event) => {
    if (event.key === "Enter") {
      this.doSearch(data.searchParam)
    }
  }}
  placeholder={data.placeholderText} />
/>

আশা করি এটি কাউকে সাহায্য করবে। :)

Answer 8

পার্টিতে দেরীতে, তবে আমি টাইপস্ক্রিপ্টে এটি করার চেষ্টা করছিলাম এবং এটি নিয়ে এসেছি:

<div onKeyPress={(e: KeyboardEvent<HTMLDivElement>) => console.log(e.key)}

এটি স্ক্রিনে চাপা ঠিক কীটি মুদ্রণ করে। সুতরাং যখন ডিভ ফোকাসের সময় আপনি সমস্ত "ক" প্রেসগুলিতে প্রতিক্রিয়া জানাতে চান, আপনি e.key কে "a" - এর সাথে তুলনা করতে পারেন - আক্ষরিক অর্থে যদি (e.key === "a")।

Comments

এটি কাজ করে না বলে মনে হচ্ছে। stackoverflow.com/questions/43503964/…

— sdfsdf

Answer 9

কিপ্রেস ইভেন্টটি আসার ক্ষেত্রে কিছু চ্যালেঞ্জ রয়েছে। মূল ইভেন্টগুলি সম্পর্কিত জ্যান ওল্টারের নিবন্ধটি কিছুটা পুরানো তবে কী ইভেন্টের সনাক্তকরণ শক্ত হতে পারে তা ভালভাবে ব্যাখ্যা করে।

কয়েকটি বিষয় লক্ষণীয়:

1. keyCode, which, charCodeবিভিন্ন মান keyup এবং keydown থেকে কী টেপার মানে আছে /। এগুলি সমস্ত হ্রাস করা হয়, তবে প্রধান ব্রাউজারগুলিতে সমর্থিত।
2. অপারেটিং সিস্টেম, ফিজিকাল কীবোর্ডস, ব্রাউজারগুলি (সংস্করণ) সমস্ত কী কোড / মানগুলিতে প্রভাব ফেলতে পারে।
3. keyএবং codeসাম্প্রতিক মান। যাইহোক, তারা লেখার সময় ব্রাউজারগুলি দ্বারা ভাল সমর্থন করে না।

অ্যাপস প্রতিক্রিয়া কীবোর্ড ঘটনা সাজসরঁজাম করার জন্য, আমি বাস্তবায়িত প্রতিক্রিয়া-কীবোর্ড-ঘটনা-হ্যান্ডলার । তাকাও এখানে.

Answer 10

আপনি এই ফাংশনটি "প্রেসইন্টার" চেক করতে পারেন