La función React onClick se activa al renderizar
Paso 2 valores a un componente secundario:
- Lista de objetos para mostrar
- función de eliminación.
Utilizo una función .map() para mostrar mi lista de objetos (como en el ejemplo dado en la página del tutorial de reacción), pero el botón en ese componente activa la onClickfunción al renderizar (no debería activarse en el tiempo de renderizado). 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é onClickla función se activa al renderizar y cómo hacer para que no lo haga?
Debido a que está llamando a esa función en lugar de pasarla a onClick, cambie esa línea a esto:
<button type="submit" onClick={() => { this.props.removeTaskFunction(todo) }}>Submit</button>
=>llamada función de flecha, que se introdujo en ES6 y será compatible con React 0.13.3 o superior.
En lugar de llamar a la función, vincule 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
El problema radica en cómo pasas tu función.
Por el 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} />
El valor de su onClickatributo debe ser una función, no una llamada a función.
<button type="submit" onClick={function(){removeTaskFunction(todo)}}>Submit</button>
