मैं क्लिक किए गए तत्व के पाठ को कंसोल पर उपयोग करने के लिए उपयोग करने का प्रयास कर रहा हूं। लेकिन यह हर बार "ग्रीन" के अंतिम अवधि तत्व को लॉग करता है, इससे कोई फर्क नहीं पड़ता कि मैं किस अवधि तत्व पर क्लिक करता हूं।

क्या क्लिक किए गए तत्व के लिए पाठ को कंसोल.लॉग करने का कोई तरीका है? शायद मैं जिस परिणाम की तलाश कर रहा हूं उसे पाने के लिए एक बेहतर हुक है?

किसी भी मदद के लिए धन्यवाद।

import React, { useRef } from "react";

export default function Hello() {
  const ref = useRef(null);

  function checkRef() {
    console.log(ref.current.innerText);
  }

  return (
    <div className="container">
      <span ref={ref} onClick={checkRef} className="selected">
        Blue
      </span>
      <span ref={ref} onClick={checkRef} className="selected">
        Red
      </span>
      <span ref={ref} onClick={checkRef} className="selected">
        Green
      </span>
    </div>
  );
}
0
StackUnderFlow 26 सितंबर 2020, 20:19

1 उत्तर

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

यदि आपको एक रेफरी की जरूरत है, तो <span>s को एक अलग घटक में रखें:

const Button = ({ text }) => {
  const ref = useRef(null);
  function checkRef() {
    console.log(ref.current.innerText);
  }
  return (
    <span onClick={checkRef} className='selected' ref={ref}>
      {text}
    </span>
  );
};
export default function Hello() {
  return (
    <Button text='Blue' />
    <Button text='Red' />
    <Button text='Green' />
  );
}

हालांकि, इस बिंदु पर, आप रेफरी को पूरी तरह से हटा भी सकते हैं और केवल text प्रोप लॉग कर सकते हैं। यदि आपके वास्तविक कोड के साथ यह संभव है तो यह और अधिक सुरुचिपूर्ण होगा:

function checkRef() {
  console.log(text);
}
0
CertainPerformance 26 सितंबर 2020, 20:22