onClick no funciona React js

Te doy la bienvenida a nuestro sitio web, en este sitio vas a encontrar la respuesta a lo que necesitas.

Solución:

Si su sistema de compilación es compatible con babel, use las funciones de flecha ES6 en su código de reacción.

Si está utilizando la clase ES6 para crear componentes, use el enlace de método en el nivel del constructor para evitar el enlace en cada llamada de procesamiento y también proporcione un key a la etiqueta div dentro de la función de mapa.

class Test extends React.Component 
    constructor(props) 
        super(props);
        this.btnTapped = this
            .btnTapped
            .bind(this);
    
    btnTapped() 
        console.log('tapped');
    
    render() 

        return (
            

                this
                    .props
                    .stations
                    .map((station, index) => 
                        return 
station
                    )
                
            
        )
    


var cards = ["amazon", "aeo", "aerie", "barnes", "bloomingdales", "bbw", "bestbuy", "regal", "cvs", "ebay", "gyft", "itunes", "jcp", "panera", "staples", "walmart", "target", "sephora", "walgreens", "starbucks"];

    
ReactDOM.render(
    , document.getElementById('test-div'));

Debe establecer una función para onClick attribute, no llamarlo. Debiera ser: onClick=this.btnTapped en vez de onClick=btnTapped().

Además, es posible hacer así:

Por lo general, se usa cuando necesita pasar un argumento a su función.

Además, para poder obtener el contexto del componente de la función externa, debe usar bind(this) método. Me gusta: onClick=btnTapped.bind(this)

Y dado que está utilizando una función de alcance para mapear arrayse crea un nuevo contexto dentro de: this.props.stations.map(function(station, index). Y this está anulado. Simplemente use una función de flecha en su lugar:

var stationComponents = this.props.stations.map((station, index) => 

   return 






station
;

);

Nota: No soy un experto en reactjs 🙂

Estoy explorando reactjs en este momento y a partir de version 16.3.1 la función de flecha funcionó para mí

  console.log("button clicked");>
    button  

Te mostramos comentarios y valoraciones

Si te animas, tienes la opción de dejar una crónica acerca de qué le añadirías a este artículo.

Utiliza Nuestro Buscador