Функція React onClick спрацьовує при візуалізації

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

1. Список об'єктів для відображення
2. функція видалення.

Я використовую 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функція запускається під час візуалізації і як зробити це не робити?

Оскільки ви викликаєте цю функцію замість того, щоб передати функцію onClick, змініть цю лінію на цю:

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

=> називається функцією стрілки, яка була введена в ES6 і буде підтримуватися в React 0.13.3 або версії.

Замість виклику функції прив'яжіть значення до функції:

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

Посилання MDN: https://developer.mozilla.org/en/docs/Web/JavaScript/Reference/Global_objects/Function/bind

Значенням вашого onClickатрибута має бути функція, а не виклик функції.

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

Для тих, хто не використовує функції стрілок, але щось простіше ... Я зіткнувся з цим, додаючи круглі дужки після моєї функції signOut ...

замініть це <a onClick={props.signOut()}>Log Out</a>

з цим <a onClick={props.signOut}>Log Out</a>...! 😆

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

Запис функції for-loop та визначення функції як {this.props.removeTaskFunction (todo)} буде виконувати функції кожного разу, коли цикл спрацьовує.

Для припинення такої поведінки нам потрібно повернути функцію onClick.

Функція стрілки жиру має прихований оператор повернення разом із властивістю bind . Таким чином, він повертає функцію OnClick, оскільки Javascript також може повертати функції !!!!!

Використання -

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

що означає-

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

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

У мене була подібна проблема, мій код був:

function RadioInput(props) {
    return (
    <div className="form-check form-check-inline">
        <input className="form-check-input" type="radio" name="inlineRadioOptions" id={props.id} onClick={props.onClick} value={props.label}></input>
        <label className="form-check-label" htmlFor={props.id}>{props.label}</label>
    </div>
    );
  }
class ScheduleType extends React.Component
{
    renderRadioInput(id,label)
    {
        id = "inlineRadio"+id;
        return(
            <RadioInput
                id = {id}
                label = {label}
                onClick = {this.props.onClick}
            />
        );

    }

Де воно повинно бути

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

у RenderRadioInput

Це вирішило для мене питання.