Задать вопрос
@Radoncheg

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

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

например вот такой код в рендере:
<i className="fa fa-trash-o icons" onClick={this.removeNote.bind(this, note.id)}/>
  • Вопрос задан
  • 78 просмотров
Подписаться 1 Простой Комментировать
Решения вопроса 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, и анонимные стрелочные функции, а оптимизацией стоит заниматься тогда, когда она необходима.
Ответ написан
Комментировать
Пригласить эксперта
Ваш ответ на вопрос

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

Похожие вопросы
ITK academy Нижний Новгород
от 80 000 до 120 000 ₽
ITK academy Воронеж
от 50 000 до 90 000 ₽