Реагировать на получение идентификатора нажатой кнопки

Question

У меня 5 кликабельных ссылок, каждая с уникальным идентификатором. Я пытаюсь получить идентификатор ссылки, по которой щелкнули. Я пробовал два метода, но ни один из них не работает так, как мне хотелось бы.

Внутри рендера у меня есть:

this.state.data.map((dynamicData, key) =>
  <a href={"/#/template"} id={dynamicData.id} onClick={() => this.reply_click(this.id)}>{dynamicData.name}</a>
  <a href={"/#/addTeams"}><button type="button" class="btn-lisa">Edit</button></a>

Основной метод, который возвращает неопределенное. Что я делаю не так ?:

reply_click(clicked_id) {
  console.log(clicked_id);
}

Answer 1

Попробуйте этот код.Предоставленный вами код не работает, потому что this привязан к текущему компоненту React, вместо этого вы можете получить доступ к id элемента, по которому щелкнули, используя e.target.id:

this.state.data.map((dynamicData, key) => {
  <a href="/#/template" id={dynamicData.id} onClick={(e) => this.reply_click(e.target.id)}>{dynamicData.name}</a>
  <a href="/#/addTeams"><button type="button" class="btn-lisa">Edit</button></a>
})

Не связано, но все жеХочу заметить, что вам не нужно использовать <a href={"blah"}, вместо этого вы можете использовать <a href="blah", потому что последний использует строковую константу.

Answer 2

Функция this внутри стрелки такая же, как и эта за ее пределами. onclick уже знает правильный this, поэтому используйте его так:

onClick={this.reply_click(this.id)}

Answer 3

вы можете сделать это

<a href={"/#/template"} id={dynamicData.id} onClick={() => this.reply_click(dynamicData.id)}>{dynamicData.name}</a>

или другим способом

<a href={"/#/template"} id={dynamicData.id} onClick={this.reply_click}>{dynamicData.name}</a>



reply_click(event) {
    console.log(event.target.getAttribute('id'))
}

Answer 4

this.reply_click(this.id)

this - это область вашего компонента, что означает, что каждый атрибут, определенный вами в вашем компоненте, может быть доступен с помощью this.Возможно, вы не определили id в этом компоненте.

Возможно, вы вместо этого захотите сделать

 this.reply_click(dynamicData.id)

.

Answer 5

Использование функции стрелки будет поддерживать контекст this извне, который не будет this, который вы хотите. Вместо этого вы можете попробовать использовать обычную функцию (function () { }), но я не уверен, будет ли this тем, что вы хотите, или нет.

Однако вы, безусловно, можете использовать e.target.id, чтобы получить то, что вы хотите:

onClick={e => this.reply_click(e.target.id)}

Тем не менее, вам следует избегать создания функций внутри вещей, так как это может привести к значительным проблемам с производительностью. Гораздо лучше просто создать функцию и передать ее:

// somewhere above
const handleClick = e => this.reply_click(e.target.id);

// attribute
onClick={handleClick}