ReactJS में `onKeyPress` इवेंट को कैसे हैंडल करें?

Question

मैं onKeyPressReactJS में ईवेंट को कैसे काम कर सकता हूं ? इसे 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 रिएक्ट पठनीय तारों में प्रमुख कोड को सामान्य करता है। मैं keyCodes के बजाय उन का उपयोग करने का सुझाव देंगे।

— रैंडी मॉरिस

@RandyMorris प्रतिक्रिया हमेशा कुंजी कोड को सही ढंग से सामान्य नहीं करती है। "+" के निर्माण के लिए आपको ShiftKey = true के साथ 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 "functionName (परम) => {}" के साथ काम करेगा?

— वॉल्टारी

@Waltari इट्स ES6 एरो फंक्शन है , जिसका अर्थ हैfunction handleKeyPress(event){...}

— हेवन

यह भी बांधता हैthis

— bhathiya-perera

शायद यह पांडित्यपूर्ण है, लेकिन यह ध्यान देने योग्य है कि इसके लिए सख्त समानता ===जांच का उपयोग करना बेहतर होगा event.key == 'Enter'।

— सिकंदर ने

Answer 2

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

onKeyDownkeyCodeघटनाओं का पता लगाता है।

Comments

आमतौर पर एंटर की के रूप में एक चीज ऑनकेईयूपी के माध्यम से पता लगाया जाता है - यह उपयोगकर्ता को बातचीत को रोकने की अनुमति देता है यदि वह निर्णय लेता है। की-वर्ड या की-डाउन का उपयोग करने पर तुरंत अमल होता है।

— एंड्रियास

Answer 3

मेरे onKeyPressलिए e.keyCodeहमेशा है 0, लेकिन e.charCodeसही मूल्य है। अगर onKeyDownसही कोड का उपयोग किया है e.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 आपके लिए है क्योंकि वे एक keyChar नहीं बल्कि एक keyCode लौटाएंगे।

— ऑस्कर

उन लोगों के लिए जो स्वयं रिएक्ट कीवीट की कोशिश कर रहे हैं, यहाँ एक कोडैंडबॉक्स मैंने बनाया है।

— एलियनकेविन

Answer 4

Keypress event को deprecated किया जाता है, आपको इसके बजाय Keydown इवेंट का उपयोग करना चाहिए।

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

— chovy

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)}

यह स्क्रीन पर दबाए गए सटीक कुंजी को प्रिंट करता है। इसलिए यदि आप डिव के फोकस में होने पर सभी "a" प्रेस का जवाब देना चाहते हैं, तो आप e.key की तुलना "a" से करेंगे - वस्तुतः if (ekey === "a")।

Comments

यह काम नहीं लगता है। stackoverflow.com/questions/43503964/…

— sdfsdf

Answer 9

कीप इवेंट में जब कुछ चुनौतियां आती हैं। प्रमुख घटनाओं पर जान वोल्‍टर का लेख थोड़ा पुराना है लेकिन अच्‍छी तरह से समझाता है कि प्रमुख घटना का पता लगाना कठिन हो सकता है।

ध्यान देने योग्य कुछ बातें:

1. keyCode, which, charCodeअलग मूल्य KeyUp और keydown से कुंजी दबाने में अर्थ है /। वे सभी पदावनत हैं, हालांकि प्रमुख ब्राउज़रों में समर्थित हैं।
2. ऑपरेटिंग सिस्टम, भौतिक कीबोर्ड, ब्राउज़र (संस्करण) सभी कुंजी कोड / मूल्यों पर प्रभाव डाल सकते हैं।
3. keyऔर codeहाल के मानक हैं। हालांकि, वे लेखन के समय ब्राउज़रों द्वारा अच्छी तरह से समर्थित नहीं हैं।

प्रतिक्रिया एप्स में कीबोर्ड इवेंट से निपटने के लिए, मैंने लागू किया प्रतिक्रिया-कीबोर्ड-इवेंट-हैंडलर लागू किया । कृपया एक नज़र डालें।

Answer 10

आप इस फ़ंक्शन को "pressEnter" देख सकते हैं