मैं ReactJS का उपयोग करके कस्टम एलिमेंट में एक फ़ंक्शन पास करना चाहता हूं

ReactJS घटक

import React from 'react';
import './SampleComponent';

export  class Button extends React.Component {

  handleClick = (event) => {
    console.log(event)
  }

  render() {

    return (
      <div>
        <sample-component onclick="handleClick"></sample-component>
      </div>
    )
  }
};

कस्टम तत्व

class SampleComponent extends HTMLElement {
  static get observedAttributes() {

  }

  // custom methods
  render() {
    this.innerHTML = `Custom Element`;
  }

  // lifecycle hooks
  connectedCallback() {
    this.render();
  }

}

window.customElements.define('sample-component', SampleComponent);

जैसा कि मैं समझता हूं, जब मैं ऑनक्लिक फ़ंक्शन पास करता हूं handleClick जेएस कस्टम एलिमेंट कार्यान्वयन में इसकी खोज करेगा (इसीलिए मुझे कंसोल में एक त्रुटि मिलती है)। तो कैसे एक समारोह पारित करने के लिए? मैंने "this.handle" की कोशिश की लेकिन यह भी काम नहीं किया।

0
Amay 20 नवम्बर 2018, 13:26

1 उत्तर

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

प्रतिक्रिया के कारण दस्तावेज़ीकरण आपको html इस तरह दिखना चाहिए

<sample-component onClick={handleClick}></sample-component>
2
Pascal L. 8 पद 2018, 20:55