Реакция на функцию onClick срабатывает при рендеринге

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

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

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

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 срабатывает при рендере и как сделать так, чтобы этого не происходило.

Ответ 1

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

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

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

Ответ 2

Вместо вызова функции привяжите значение к функции:

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

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

Ответ 3

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

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

Ответ 4

Для тех, кто не использует функции стрелок, но что-то попроще... Я сталкивался с этим при добавлении скобок после моей функции signOut...

замените этот <a onClick={props.signOut()}>Log Out</a>

с этим <a onClick={props.signOut}>Log Out</a>...! 😆

Ответ 5

JSX используется с ReactJS, так как он очень похож на HTML и дает программистам ощущение использования HTML, тогда как в конечном итоге он переносится в файл javascript.

Написание цикла for и указание функции как {this.props.removeTaskFunction(todo)} будет выполнять функции всякий раз, когда цикл запускается.

Чтобы остановить это, нам нужно вернуть функцию в onClick.

Функция толстой стрелки имеет скрытое выражение return вместе со свойством bind. Таким образом, он возвращает функцию в OnClick, так как Javascript тоже может возвращать функции !!!!!

Используйте -

onClick={() => { this.props.removeTaskFunction(todo) }}

который means-

var onClick = function() {
  return this.props.removeTaskFunction(todo);
}.bind(this);

Ответ 6

Для предотвращения вызова функции только при нажатии кнопки

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

Нет необходимости в дополнительных фигурных скобках

Ответ 7

JSX будет оценивать выражения JavaScript в фигурных скобках

В этом случае вызывается this.props.removeTaskFunction(todo) и возвращаемое значение присваивается onClick

То, что вы должны предоставить для onClick является функцией. Для этого вы можете заключить значение в анонимную функцию.

export const samepleComponent = ({todoTasks, removeTaskFunction}) => {
    const taskNodes = todoTasks.map(todo => (
                <div>
                    {todo.task}
                    <button type="submit" onClick={() => removeTaskFunction(todo)}>Submit</button>
                </div>
            );
    return (
        <div className="todo-task-list">
            {taskNodes}
        </div>
        );
    }
});