Tengo el siguiente código:
import "./styles.css"; export default function App() { const handleOnClick = (index) => { console.log(index); } return ( <div className="App"> <ul> <li onClick={handleOnClick.bind(this, 1)}>list one</li> <li onClick={handleOnClick.bind(this, 2)}>list two</li> </ul> </div> ); }Cada vez que hago clic en una lista, la función handleOnClick obtiene el índice que se le pasa.
Me pregunto a qué se refiere "esto" en este ejemplo. ¿Por qué necesitamos usar bind() y pasar "esto" dentro de él?
Me pregunto a qué se refiere "esto" en este ejemplo.
Nada útil, por varias razones.
App es un componente de función, no un componente de clase, por lo que this tiene un valor útil para comenzarhandleOnClick es una función de flecha, por lo que el primer argumento de bind no tiene efectohandleOnClick no usa this internamente, por lo que incluso si no fuera una función de flecha, el enlace no tendría efecto this valor es completamente arbitrario. Existe solo para que el primer argumento para bind tenga un valor. Sería más idiomático usar null .
En los componentes de clase, se usa bind para garantizar que this continúe apuntando al componente en lugar del elemento DOM cuando se pasa un método a un controlador de eventos de clic (generalmente para que this.setState funcione).
Un buen ejemplo de un componente de función intentaría minimizar la creación de nuevas funciones en cada representación para que los controladores de eventos de click en el DOM real no necesiten actualizarse en cada representación.
Esto se lograría haciendo uso de useCallback para que handleOnClick no tuviera un nuevo valor en cada renderizado y no usando bind (ya que bind crea nuevas funciones).
Dado que desea pasar un valor diferente como argumento, esto se logra de manera más limpia dividiendo los elementos en los que se puede hacer clic en componentes separados y pasando los valores como accesorios.
Además, los elementos de la lista no están diseñados para hacer clic en ellos. Entre otras cosas, no se podrá acceder a ellos mediante la navegación con teclado y los lectores de pantalla no anunciarán que se puede hacer clic en ellos. Debe utilizar un elemento diseñado para ser interactivo.
export default function App() { return ( <div className="App"> <ul> <Item index={1} label="list one" /> <Item index={2} label="list two" /> </ul> </div> ); } const Item = ({ index, label }) => { const handleOnClick = useCallback(() => { console.log(index); }, []); return <li><button onClick={handleOnClick}>{label}</button></li> }bind es un método variable que requiere el contexto (el valor this tomará cuando se llame a la función) como primer argumento. Todos los demás argumentos de bind serán iguales a los argumentos de la función llamada.
En su caso, la función llamada no usa this , pero aún necesita pasar algún argumento como el primer parámetro, incluso si el valor no se usa. Quien escribió ese script, decidió usar el this externo de la persona que llama, pero nada cambiará si this sustituye por cualquier otro valor, como null o undefined .