onclick no funciona en mi componente de reacción, aquí está mi código:
const listItems = xox.map((nums) => <Square key={nums.index} cont={nums.content} onclick={function (){ alert(); }}/> );También probé esto, pero alerta trabajando en el renderizado de la página:
<Square key={nums.index} cont={nums.content} onclick={alert()}/>mi función de aplicación:
function App() { return ( <div className="App"> <header> <img src={logo} alt="React logo"/> <h1>XOX</h1> </header> <div className="playground"> {listItems} </div> </div> ); }Cuadrado.js
import React from "react"; export class Square extends React.Component { render() { return ( <div className="square" onClick={this.props.onclick}> {this.props.cont} </div> ) } }Debe asegurarse de que su componente Square acepte y luego use un accesorio onclick . Por ejemplo, algo como:
const Square = ({ cont, onclick }) => ( <div onClick={onclick}>{cont}</div> );De lo contrario, se ignorará la propiedad, ya que no se usa dentro del componente.
También probé esto, pero alerta trabajando en el renderizado de la página:
Sí, debe pasar una función como accesorio, no invocar la función y luego pasar el resultado como accesorio. Este:
return <Square key={nums.index} cont={nums.content} onclick={alert()}/>es equivalente a hacer
const result = alert(); return <Square key={nums.index} cont={nums.content} onclick={result}/>;Así que en su lugar necesitas
onclick={() => alert()} (o con la palabra clave de function como ya lo está haciendo, aunque es menos conciso)
Si es posible, también sugeriría usar las mayúsculas estándar para los controladores de clics de React, que es onClick , no onclick ; hay menos posibilidades de confundir a las personas de esa manera.
intente usar funciones de flecha:
<Square key={nums.index} cont={nums.content} onClick={() => alert('hello world')}/>