javascript - función onClick de React se ejecuta al renderizar

Paso 2 valores a un componente hijo:

Lista de objetos para mostrar
eliminar función.

Uso la función .map() para mostrar mi lista de objetos (como en el ejemplo dado en la página del tutorial de React), pero el botón en ese componente dispara la función onClick al renderizar (no debería dispararse al momento de renderizar). Mi código se ve así:

module.exports = React.createClass({
    render: function(){
        var taskNodes = this.props.todoTasks.map(function(todo){
            return (
                <div>
                    {todo.task}
                    <button type="submit" onClick={this.props.removeTaskFunction(todo)}>Submit</button>
                </div>
            );
        }, this);
        return (
            <div className="todo-task-list">
                {taskNodes}
            </div>
        );
    }
});

Mi pregunta es: ¿por qué la función onClick se ejecuta al renderizar y cómo hacer para que no lo haga?

Respuesta #1

Porque estás llamando a esa función en lugar de pasar la función a onClick, cambia esa línea a esto:

<button type="submit" onClick={() => { this.props.removeTaskFunction(todo) }}>Submit</button>

=> llamado Función Flecha, que fue introducida en ES6, y será compatible en React 0.13.3 o superior.

Respuesta #2

En lugar de llamar a la función, vincula el valor a la función:

this.props.removeTaskFunction.bind(this, todo)

Referencia de MDN: https://developer.mozilla.org/en/docs/Web/JavaScript/Reference/Global_objects/Function/bind

Respuesta #3

El problema radica en cómo pasas tu función

En este momento no estás pasando la función, sino llamándola:

<Button onClick={yourFunction()} />

Puedes solucionar esto de dos maneras:

<Button onClick={() => yourFunction(params)} />

O si no tienes ningún parámetro:

<Button onClick={yourFunction} />

Respuesta #4

El valor de tu atributo onClick debería ser una función, no una llamada a función.

<button type="submit" onClick={function(){removeTaskFunction(todo)}}>Submit</button>

Respuesta #5

necesitas usar una función flecha con onClick para evitar que se invoque inmediatamente. así que si tu botón se ve así:

<button onClick={yourfunctionname()} />

debe ser así: