Quiero crear un enlace personalizado en el que agrego un detector de eventos de clic a un elemento DOM que llama a una función definida en un componente React que usa una variable de estado.
Agrego el detector de eventos, pero cuando llamo a la función, no refleja ningún cambio de estado, siempre toma el valor del estado inicial.
const useCustomHook = (functionDefinedInComponent) => { // logic to get the dom element element.addEventListener('click', () => functionDefinedInComponent(item)); }; const CustomComponent = () => { const [state, setState] = useState(...); const customFunction = (item) => { setState(...); // change the 'state' variable // use item and state to do something } useCustomHook(customFunction); return ...; } Cuando hago clic en el elemento DOM al que agregué el evento de clic, la customFunction activa con el valor de estado inicial. ¿Hay alguno para solucionar esto?
Quise decir algo como esto. es posible que también deba envolver su función de devolución de llamada en React.useCallback.
const useCustomHook = (functionDefinedInComponent) => { React.useEffect(() => { // logic to get the dom element element.addEventListener('click', () => functionDefinedInComponent()); }, [functionDefinedInComponent]) };¿Puedes probar esto y decirme qué tipo de problema tienes?
Aquí hay un entorno limitado de código que estaba tratando de hacer. https://codesandbox.io/s/rakeshshrestha-nvgl1?file=/src/App.js
Explicación del ejemplo de codesandbox
Crear un gancho personalizado
const useCustomHook = (callback) => { React.useEffect(() => { // logic to get the dom element const el = document.querySelector(".clickable"); el.addEventListener("click", callback); // we should remove the attached event listener on component unmount so that we dont have any memory leaks. return () => { el.removeEventListener("click", callback); }; }, [callback]); }; entonces, creé un gancho personalizado llamado useCustomHook que acepta una función como un parámetro llamado callback de llamada. Dado que queremos adjuntar un evento en el elemento con clase en la que se clickable , debemos esperar hasta que el elemento se pinte en el navegador. Para este propósito, usamos useEffect , que se llama después de que el componente se ha pintado en la pantalla, lo que hace que .clickable esté disponible para seleccionar.
const [input, setInput] = React.useState(""); const logger = React.useCallback(() => { alert(input); }, [input]); useCustomHook(logger); // render Aquí, tengo una entrada de estado que contiene el estado del cuadro de texto. Y también una función llamada logger que pasé a mi enlace personalizado. Tenga en cuenta que el registrador de funciones se ha envuelto dentro de useCallback . No necesita envolverlo en este caso, pero estaba allí para que cada vez que el componente se vuelva a representar, no se creará una nueva función de registro, excepto los cambios en el estado de input .
Puedes usar un componente público como este:
const ClickableComponent = props => { const { title, handleClick, component: Component } = props; return ( <Component onClick={handleClick}>{title}</button> ) }; export default ClickableComponent;Puede usar este componente como se muestra a continuación:
<ClickableComponent title="your title" handleClick={handleClick} component={<button/> } />