web-dev-qa-db-fra.com

ReactJS: l'écouteur onClick attendu est une fonction, mais une chaîne de type obtenue

Je ne comprends pas pourquoi ReactJs trouve "chaîne" au lieu de mes méthodes de gestion des clics.

Ceci est mon code:

define(["react"], function(React) {


return React.createClass({

    pageUp: function() {
        console.log("go next page");
    },

    pageDown: function() {
        console.log("go prev page");
    },

    toggleMenu: function() {
        console.log("toggle menu");
        this.state.menuStatus = !this.menuStatus;
    },

    getInitialState: function() {
        return {
            // Toggle menu status; false -> closed | true -> opened
            menuStatus: false
        }
    },

    render: function() {
        var _this = this;
        return (
            <div className="overlay-nav">
                <ul className="up-down-arrows">
                    <li onClick="{this.pageUp}" className="arrow-up"><i className="fa fa-angle-up"></i></li>
                    <li onClick="{_this.pageDown.bind(_this)}" className="arrow-down"><i className="fa fa-angle-down"></i></li>
                </ul>

                <div onClick="{_this.toggleMenu}" className="toggleMenu"><i className="fa fa-bars"></i></div>
            </div>
        );
    }
});

});

J'ai déjà essayé d'utiliser

var _this = _this
// ....
<li onClick="_this.pageUp" ...

et lie comme

<li onClick="{this.pageUp.bind(this)}"

Mais quand je rafraîchit la page, j'obtiens toujours cette erreur:

L'erreur que je reçois est:

Error: Expected onClick listener to be a function, instead got type string(…)

Toute aide est très appréciée.

tks

javascriptreactjsreact-jsx
31
ppalmeida

Vous devez supprimer les guillemets. <li onClick={this.pageUp.bind(this)}>...

Dans Vanilla javascript, vous auriez probablement onclick="somefunctionname". Mais pas dans JSX, vous devez transmettre une fonction comme indiqué dans l'erreur.

De plus, la .bind(this) n'est pas nécessaire si vous utilisez React.createClass. Une fois que vous avez supprimé les guillemets, vous obtiendrez probablement un avertissement indiquant que ce n'est pas nécessaire puisque React le fait pour vous.

55
nbermudezs

Je sais que c'est un peu tard, mais je veux quand même répondre aux questions des autres.

Retirer "" après onClick.

Par exemple: change onClick="{this.pageUp}" à onClick={this.pageUp}.

18
shashikant tripathi

Un autre scénario, ce qui pourrait arriver, est lorsque vous appelez la méthode d'action à partir d'un événement onClick, si vous manquez la partie représentation de la fonction comme ...

<button onClick = {this.props.increment('INCREMENT')}>+</button>

au lieu

<button onClick = {()=>this.props.increment('INCREMENT')}>+</button>

le (> {}) == est important de dire à votre événement onClick qu'il s'agit d'une fonction.

4
Ignatius Andrew