Привязка функции Reactjs к обработчику событий - PullRequest
0 голосов
/ 30 декабря 2018

Я пытаюсь понять, почему мы должны привязать нулевой объект к функции

add(text) {
    this.setState(prevState=> ({
        notes: [
            ...prevState.notes,
            {
                id: this.nextId(),
                note: text
            }
        ]
    }))
}

render() {
    return (
        <div className="board">
            {this.state.notes.map(this.eachNote)}
            <button onClick={this.add.bind(null, "New Note")}
                id="add">Add note</button>
        </div>
    )
}

Почему мы не можем просто сделать this.add("New Note")?

1 Ответ

0 голосов
/ 30 декабря 2018

onClick={this.add("New Note")} немедленно запустит метод add(), а затем установит результат как onClick.Результат add() не определен, потому что он ничего не возвращает.Таким образом, мы бы по существу сделали onClick={undefined}.

. Чтобы исправить это, мы можем использовать анонимную функцию: onClick={() => this.add("New Note")}
На этот раз программа правильно вызывает this.add("New Note") при нажатии кнопки.

Или мы можем просто воспользоваться тем фактом, что bind() позволяет нам указывать контекст this и аргументы, которые мы хотим передать, и просто использовать onClick={this.add.bind(this, "New Note")} (используя this в качестве первого аргументапривязывает экземпляр как контекст, как функция стрелки во втором абзаце)

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.
...