javascript - example - set props react

ReactJS: Se esperaba que la escucha onClick fuera una función, en lugar de eso tenía el tipo string

Question

No puedo entender por qué ReactJs está encontrando "cadena" en lugar de mis métodos de control de clics.

Este es mi código:

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>
        );
    }
});

});

Ya traté de usar

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

y se une como

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

Pero cuando actualizo la página, siempre recibo este error:

El error que recibo es:

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

Cualquier ayuda es muy apreciada.

tks

Answer 1

Necesitas eliminar las comillas. <li onClick={this.pageUp.bind(this)}>...

En javascript de vainilla probablemente tendría onclick = "somefunctionname". Pero no en JSX, debe pasar una función como se indica en el error.

Además, el .bind(this) no es necesario si está utilizando React.createClass , una vez que haya eliminado las comillas, probablemente recibirá una advertencia que indica que no es necesario ya que React lo hace por usted.

Answer 2

Otro escenario en el que puede suceder esto es cuando se llama al método de acción desde un evento onClick, si pierde la parte de representación de la función como ...

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

en lugar

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

El () => {} es importante para informarle a su evento onClick que es una función.

Answer 3

Sé que es un poco tarde pero todavía quiero responder las preguntas de los demás.

Eliminar "" después de onClick .

Por ejemplo: cambie onClick="{this.pageUp}" por onClick={this.pageUp} .