Estoy tratando de hacer un onClick con una condición, pero tengo un problema al intentar pasar con un parámetro.
La razón por la que quiero hacer esto es porque dentro de TableRow tengo un botón que solo es visible en el escritorio. Pero cuando las personas están en 900 px o menos, quiero que sea posible hacer clic en toda la fila. IsDesktop devuelve verdadero o falso dependiendo de si el usuario tiene más o menos de 900px
<TableRow hover key={site.id} onClick={isDesktop&&(e)=>handleSubmit(e,site.url)}> <TableRowSite site={site} index={index} /> </TableRow>Esto es lo que he intentado hasta ahora. Pero me sigue dando error.
Parsing error: Unexpected token, expected "}" (31:67)He visto varios tutoriales usando una condición en onClick pero nunca con un parámetro pero creo que es posible ya que tiene sentido.
Yo intentaría hacer algo como esto:
<TableRow hover key={site.id} onClick={isDesktop ? (e) => handleSubmit(e, site.url) : undefined}>De lo contrario, simplemente está tratando de pasar un valor booleano a un accesorio de manejo de eventos que está esperando una devolución de llamada que aparentemente es la causa del problema en cuestión.
Una solución rápida a la apariencia de su componente
<TableRow hover key={site.id} onClick={isDesktop&&((e)=>handleSubmit(e,site.url))}> <TableRowSite site={site} index={index} /> </TableRow>Simplemente envuelva todo después de && entre paréntesis. Dicho esto, probablemente haya una mejor manera de abordar esto renderizando una versión de escritorio o una versión móvil dependiendo del tamaño de pantalla del usuario.
Devolver condicionalmente un controlador indefinido
<TableRow hover key={site.id} onClick={isDesktop ? (e) => handleSubmit(e, site.url) : undefined} > <TableRowSite {...{site, index }} /> </TableRow> O invoque condicionalmente la devolución de llamada handleSubmit
<TableRow hover key={site.id} onClick={(e) => isDesktop && handleSubmit(e, site.url)} > <TableRowSite {...{site, index }} /> </TableRow>