मैं अपने काम कर रहे React.JS ऐप को एक्सेसिबिलिटी मानकों के अनुरूप बनाने की कोशिश कर रहा हूं।

अभ्यास के एक भाग के रूप में, मैंने onKeyDown हैंडलर जोड़े जहां मैं onClick हैंडलर का उपयोग कर रहा हूं। मैं उन हैंडलर को एक विशेष रैपर फ़ंक्शन के साथ भी लपेटता हूं जो जांचता है कि कौन सी कुंजी दबाई गई है। वास्तविक कोड नीचे है:

import { KeyboardEvent } from 'react';
enum Keys {
  TAB = 9,
}
const handleKeyPress = (cb: () => void) => (e: KeyboardEvent) => {
  if (e.keyCode !== Keys.TAB) cb();
};
export { handleKeyPress };

मैं इसे इस रूप में उपयोग करता हूं:

<div
  className={classes.link_complete}
  onClick={handleOnClick}
  onKeyDown={handleKeyPress(() => {
    handleOnClick();
  })}
  tabIndex={0}
  role="button"
>

यह ठीक काम कर रहा है। हालांकि, ऐसी स्थितियां हैं जब मैं वास्तविक घटना को handleKeyPress फ़ंक्शन द्वारा लिपटे फ़ंक्शन के तर्क के रूप में पास करना चाहता हूं। यह मेरे लिए काम नहीं कर रहा है। मैंने कोशिश की:

onClick={handleViewInfoClick}
onKeyDown={(e) => {
  console.log('detected keydown');
  handleKeyPress(() => {
    console.log('inside handler');
    handleViewInfoClick(e);
  });
}}

यह काम नहीं कर रहा है। कीडाउन घटनाओं का पता चला है, इसलिए मुझे detected keydown छपा हुआ दिखाई दे रहा है। फिर भी, अंदर का कोड लागू नहीं होता है।

ऐसा करने का सही तरीका क्या है?

0
Igor Shmukler 7 जिंदा 2022, 15:35

1 उत्तर

सबसे बढ़िया उत्तर

समस्या यह है कि handleKeyPress एक फ़ंक्शन देता है (जो समझ में आता है, क्योंकि आप आमतौर पर onKeyDown के लिए वापसी मान का उपयोग करते हैं), लेकिन आप इसे अपने उदाहरण में नहीं बुला रहे हैं जहां आप इसका उपयोग करने का प्रयास कर रहे हैं ईवेंट ऑब्जेक्ट, आप फ़ंक्शन बनाने के लिए केवल handleKeyPress को कॉल कर रहे हैं और फिर फ़ंक्शन को कॉल नहीं कर रहे हैं।

मैं handleKeyPress को संशोधित करूंगा ताकि यह घटना वस्तु के साथ गुजरे:

const handleKeyPress = (cb: (e: KeyboardEvent) => void) => (e: KeyboardEvent) => {
  //                         ^^^^^^^^^^^^^^^^
  if (e.keyCode !== Keys.TAB) cb(e);
  //                             ^
};

तब उपयोग लगभग आपके मूल उपयोग की तरह होगा, आप केवल हैंडलर शामिल करेंगे:

<div
  className={classes.link_complete}
  onClick={handleOnClick}
  onKeyDown={handleKeyPress((e) => handleViewInfo(e))}
  tabIndex={0}
  role="button"
>

या अधिक संक्षेप में:

<div
  className={classes.link_complete}
  onClick={handleOnClick}
  onKeyDown={handleKeyPress(handleViewInfo)}
  tabIndex={0}
  role="button"
>
1
T.J. Crowder 7 जिंदा 2022, 15:44