Estoy tratando de obtener la clave de un elemento que está mapeado desde una base de datos (solo digo esto para que nadie sugiera usar el estado)
listedItems.map((e)=> ( <div ref={ref} key={e.openRequestDocId}> // Need to get this Key <button onClick={()=> console.log(ref)} >get Key from useRef</button> </div>Creé una maqueta de codeSandbox de dónde estoy. Básicamente, tengo una referencia de React.useRef(), y estoy tratando de obtener la clave de apoyo del div principal.
https://codesandbox.io/s/mutable-sea-5qony2?file=/src/App.js
¡Toda ayuda es apreciada!
puede adjuntar datos adicionales a las referencias usando el gancho useImperativeHandle como el siguiente:
import React, { useRef, useImperativeHandle } from "react"; export default function App() { const ref = useRef(); useImperativeHandle(ref, () => ({ key: "A3hNc95uj" })); const handleClick = () => { console.log(ref); }; return ( <div className="App" key={"A3hNc95uj"} ref={ref}> <h1>Hello CodeSandbox</h1> <h2>Start editing to see some magic happen!</h2> <button onClick={handleClick}>Log Key from parent div</button> </div> ); }Configure su clave en un atributo de data- (para un nombre simple en este momento: clave de datos). Y luego, desde la referencia, dado que obtiene el elemento div, puede recuperarlo nuevamente haciendo ref.current.dataset.key
El único inconveniente de este enfoque es que la clave será visible en el DOM. Si ese no fuera el caso, puede crear un cierre para el botón al hacer clic con la tecla
<button onClick={(event) => myfunction(event, e.openRequestDocId)}> get Key from useRef </button>De esta manera, su controlador de clics obtendrá la clave requerida onClick