Реакция привязки события внутри цикла не определена

Question

Я добавляю событие click внутри цикла моего метода рендеринга реагирования перед возвратом и код, как показано ниже

renderedCheckboxes = content.map( function(f, i) {
                if ( f['acf_fc_layout'] === 'checkbox' ) {
                    let id="customCheck" + i;
                    return (
                        <li className="list-group-item" key={i}>
                        <div className="custom-control custom-checkbox">
                            <input type="checkbox" name={f.checkbox} onClick={this.handleClick.bind(this) } className="custom-control-input" id={id} />
                            <label className="custom-control-label" htmlFor={id}>{f.label}</label>
                        </div>
                        </li>
                    )
                }
            });

, но при нажатии на флажок я получаю TypeError: Cannot read property 'handleClick' of undefined

ЧтоЯ делаю не так в этом случае?

Answer 1

Ваш this.handleClick не существует в пределах функции карты. Кэшируйте это, написав const that = this; перед функцией карты и используйте that.handleClick

Answer 2

Изменить на функцию стрелки, чтобы this находился в области действия:

renderedCheckboxes = content.map((f, i) => {
  if ( f['acf_fc_layout'] === 'checkbox' ) {
    let id="customCheck" + i;
    return (
      <li className="list-group-item" key={i}>
        <div className="custom-control custom-checkbox">
          <input type="checkbox" name={f.checkbox} onClick={this.handleClick.bind(this) } className="custom-control-input" id={id} />
          <label className="custom-control-label" htmlFor={id}>{f.label}</label>
        </div>
      </li>
    )
  }
});