web-dev-qa-db-fra.com

Réagir sur l'événement

Il me manque quelque chose. Voici un monde de salut très simple, l’objectif est de déclencher un événement d’alerte onClick. L'événement se déclenche lorsque la page est chargée, mais pas lorsque je clique sur le bouton. J'apprécie l'aide. Voici un jsFiddle pour rendre plus facile à voir: jsFiddle

var Hello = React.createClass({
render: function() {
    return <button onClick={alert("Hello World!")}>
               Click Me
            </button>;
}
React.render(<Hello />, document.getElementById('container'));
reactjsreact-jsx
15
Ivan Histand

Je pense que vous vous trompez, parce que ReactJS n’est que JavaScript. Je ne pense pas que votre façon de déclencher cet événement fonctionnera. Votre onClick devrait activer une fonction attachée à votre élément React comme ceci. 

var Hello = React.createClass({
    myClick: function () {
        alert("Hello World!");
    },
    render: function() {
        return <button onClick={this.myClick}>
                   Click Me
                </button>;
    }
});

React.render(<Hello />, document.getElementById('container'));
22
Chris Hawkes

Note: c'est une autre façon de faire si vous voulez quelque chose de rapide/en ligne:

<button onClick={()=>{ alert('alert'); }}>alert</button>
11
armyofda12mnkeys

Si la fonction à exécuter a des paramètres, il doit être lié à la fonction comme suit:

var Hello = React.createClass({
  handleClick: function (text) {
      alert(text)
  },

   render: function () {
      return <button onClick = {
          this.handleClick.bind(null, "Hello World")
      } > Click Me < /button>;
  }
});

React.render(<Hello / > , document.getElementById('container'));

Cela a du sens maintenant. Merci encore @ Chris-Hawkes de m'avoir orienté dans la bonne direction.

3
Ivan Histand

Maintenant je vois pourquoi j'avais le problème auparavant. Le problème est venu quand j'essayais de passer un argument à la fonction:

var Hello = React.createClass({
    myClick: function (text) {
        alert(text);
    },
    render: function() {
        return <button onClick={this.myClick("Hello world")}>
                   Click Me
                </button>;
    }
});

Cela a le même comportement que le code d'origine.

0
Ivan Histand