@Radoncheg

Как избежать bind в JSX?

Я новичок. Интересно как избежать bind в коде react и сделать по другому, чтобы функция каждый раз заново не создавалась?

например вот такой код в рендере:
<i className="fa fa-trash-o icons" onClick={this.removeNote.bind(this, note.id)}/>
  • Вопрос задан
  • 52 просмотра
Решения вопроса 1
rockon404
@rockon404 Куратор тега React
Frontend Developer
В вашем случае можно оставить как есть. Можно переделать так:
class Example extends React.Component {
  removeNote = () => {
  };

  render() {
    const { note } = this.props;

    return (
      <i className="fa fa-trash-o icons" onClick={() => this.removeNote(note.id)}/>
    );
  }
}

Можно пойти дальше:
class Example extends React.Component {
  removeNote = e => {
    const { id } = e.currentTarget.dataset;
  };

  render() {
    const { note } = this.props;

    return (
      <i className="fa fa-trash-o icons" data-id={note.id} onClick={this.removeNote} />
    );
  }
}


Вообще при необходимости передавать в хандлер дополнительные данные можно использовать и bind, и анонимные стрелочные функции, а оптимизацией стоит заниматься тогда, когда она необходима.
Ответ написан
Пригласить эксперта
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы
Ultimate Guitar Минск
от 1 000 до 5 000 usd.
Enapter Санкт-Петербург
от 180 000 до 240 000 руб.