Функция React onClick срабатывает при рендеринге

Я передаю 2 значения дочернему компоненту:

  1. список объектов для отображения
  2. функции Удалить.

Я использую a .функция map () для отображения моего списка объектов(как в примере, приведенном на странице react tutorial), но кнопка в этом компоненте запускает функцию onClick при рендеринге (in не должен срабатывать во время рендеринга). Мой код выглядит так:

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

мой вопрос: Почему моя функция onClick срабатывает при рендеринге и как чтобы этого не случилось.

97
javascript reactjs

3 ответов

поскольку вы вызываете эту функцию вместо передачи функции onClick, измените эту строку следующим образом:

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

=> вызванная функция Стрелки, которая была введена в ES6 и будет поддерживаться на React 0.13.3 или upper.

282

вместо вызова функции, связывающие значения функции:

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

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

24

значению onClick атрибут должен быть функцией, а не вызовом функции.

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