Eu passo 2 valores para um componente filho:
- Lista de objetos a serem exibidos
- função de exclusão.
Eu uso uma função .map () para exibir minha lista de objetos (como no exemplo dado na página do tutorial de reação), mas o botão desse componente aciona a onClick
função no render (ele não deve acionar no tempo de renderização). Meu código fica assim:
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>
);
}
});
Minha pergunta é: por que a onClick
função dispara no render e como fazê-lo não funcionar?
javascript
reactjs
button
onclick
dom-events
Stralos
fonte
fonte
onClick={() => this.props.removeTaskFn(todo)}
Em vez de chamar a função, vincule o valor à função:
Ref da MDN: https://developer.mozilla.org/en/docs/Web/JavaScript/Reference/Global_objects/Function/bind
fonte
O valor para o seu
onClick
atributo deve ser uma função, não uma chamada de função.fonte
Para aqueles que não usam funções de seta, mas algo mais simples ... Encontrei isso ao adicionar parênteses após minha função signOut ...
substitua isso
<a onClick={props.signOut()}>Log Out</a>
com isso
<a onClick={props.signOut}>Log Out</a>
...! 😆fonte
O JSX é usado com o ReactJS, pois é muito semelhante ao HTML e dá aos programadores a sensação de usar HTML, ao passo que, em última análise, transpila para um arquivo javascript.
Usar -
que significa-
fonte
O JSX avaliará expressões JavaScript em chaves
Nesse caso,
this.props.removeTaskFunction(todo)
é chamado e o valor de retorno é atribuído aonClick
O que você precisa prever
onClick
é uma função. Para fazer isso, você pode agrupar o valor em uma função anônima.fonte
Eu tive um problema semelhante, meu código era:
Onde deveria estar
em RenderRadioInput
Corrigiu o problema para mim.
fonte