Hice clic en el botón y ejecuté la función onClickUserId.
Luego, si ejecuto esta función, también quiero ejecutar la función del botón onClickListContent. No se que hacer.
Quiero mostrar el valor del argumento en console.log para que se haga clic automáticamente en onClickListContent cuando se haga clic en el valor onClickUserId.
const onClickUserId = (id) => { console.log(id) } const onClickListContent = (Content) => { console.log(Content); }; return ( <div> <> <div> <button onClick={() => onClickUserId(3)}>click</button> </div> </> <> <div> <button onClick={() => onClickListContent(6)}>click</button> </div> </> </div> )
Traté de poner la función onClickListContent.click() en la función onClickUserId, pero no se puede ejecutar debido al valor del argumento. ¿Cómo debo escribir el código?
import {useRef} from 'react' export default function App() { const ref = useRef() const onClickUserId = (id) => { console.log(id); ref.current.click(); }; const onClickListContent = (Content) => { console.log(Content); }; return ( <div> <> <div> <button onClick={() => onClickUserId(3)}>click</button> </div> </> <> <div> <button ref={ref} onClick={() => onClickListContent(6)}>click</button> </div> </> </div> ); }
puede crear una referencia a ese botón y usarlo para activar la función de clic.
use el gancho de reacción useRef()
:
const listContentBtn = useRef(null); const onClickUserId = (id) => { console.log(id) listContentBtn.current.click() } const onClickListContent = (Content) => { console.log(Content); }; return ( <div> <> <div> <button onClick={() => onClickUserId(3)}>click</button> </div> </> <> <div> <button onClick={() => onClickListContent(6)} ref={listContentBtn}>click</button> </div> </> </div> )