React Funkcja onClick uruchamia się podczas renderowania

Przekazuję 2 wartości do elementu potomnego:

1. Lista obiektów do wyświetlenia
2. funkcja usuwania.

Używam funkcji .map () do wyświetlania mojej listy obiektów (jak w przykładzie podanym na stronie z instrukcją reagowania), ale przycisk w tym komponencie uruchamia onClickfunkcję podczas renderowania (nie powinien odpalać w czasie renderowania). Mój kod wygląda następująco:

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

Moje pytanie brzmi: dlaczego onClickfunkcja odpala podczas renderowania i jak go nie robić?

Ponieważ wywołujesz tę funkcję zamiast przekazywania funkcji do onClick, zmień tę linię na:

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

=> o nazwie Arrow Function, która została wprowadzona w ES6 i będzie obsługiwana w React 0.13.3 lub wyższej.

Zamiast wywoływać funkcję, powiąż wartość z funkcją:

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

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

Wartość tego onClickatrybutu powinna być funkcją, a nie wywołaniem funkcji.

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

Dla tych, którzy nie używają funkcji strzałek, ale coś prostszego ... Zetknąłem się z tym podczas dodawania nawiasów po funkcji signOut ...

wymień to <a onClick={props.signOut()}>Log Out</a>

z tym <a onClick={props.signOut}>Log Out</a>...! 😆

JSX jest używany z ReactJS, ponieważ jest bardzo podobny do HTML i daje programistom poczucie używania HTML, podczas gdy ostatecznie transponuje się do pliku javascript.

Zapisanie pętli for i określenie funkcji jako {this.props.removeTaskFunction (todo)} spowoduje wykonanie funkcji za każdym razem, gdy zostanie uruchomiona pętla.

Aby zatrzymać to zachowanie, musimy przywrócić funkcję onClick.

Funkcja grubej strzałki ma ukrytą instrukcję return wraz z właściwością bind . W ten sposób zwraca funkcję OnClick, ponieważ JavaScript może również zwrócić funkcje !!!!!

Posługiwać się -

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

co znaczy-

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

JSX oceni wyrażenia JavaScript w nawiasach klamrowych

W takim przypadku this.props.removeTaskFunction(todo)wywoływana jest wartość przypisana do zwracanej wartościonClick

Musisz podać onClickfunkcję. Aby to zrobić, możesz zawinąć wartość w anonimową funkcję.

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

Miałem podobny problem, mój kod to:

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

    }

Gdzie powinno być

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

w RenderRadioInput

Naprawiono problem dla mnie.