Как по клику узнать ключ?

Question

[sinevik]

click(e){
    console.log(e.altKey);
    let unit = this.state.array;
}


    
render() {
    let array = this.state.array;
    let unit = array.map((item, index) => {
                return (
                <a key={index}
                style={{display:"block"}}
                onClick={this.click.bind(this)}
                >Hello, {item}</a>
                )
            });

Comments

[Антон Спирин]

какой ключ то?

[sinevik]

<a key={index}

[eternalSt]

На заметку, индексы в качестве ключей нельзя использовать. И связано это с внутрянкой React. Запускаться код будет, но задачи своей ключи не выполнят. Вот здесь хорошо расказано (7-е видео) а в доках так вообще прямым текстом сказано.

Answer 1

[Антон Спирин]

Зачем вам ключ? Передавайте сам элемент:

сlick(e, item) {
  console.log(item);
}

render() {
    const { array } = this.state;
    const unit = array.map((item, index) => (
      <a 
        key={index}
        style={{display:"block"}}
        onClick={(e) => this.click(e, item)}
      >
        Hello, {item}
      </a>
     ));

Если все-таки нужен именно ключ, то просто добавьте еще один аргумент в вызов click.

Comments

[sinevik]

Что бы по ключу удалить его из массива

[Антон Спирин]

sinevik,

сlick(e, index) {
  console.log(index);
}

render() {
    const { array } = this.state;
    const unit = array.map((item, index) => (
      <a 
        key={index}
        style={{display:"block"}}
        onClick={(e) => this.click(e, index)}
      >
        Hello, {item}
      </a>
     ));

[Антон Спирин]

sinevik, удаляйте так:

сlick(e, index) {
  this.setState(prevState => ({
    array: prevState.array.filter((_, i) => i !== index), 
  }));
}

Answer 2

[Coder321]

click(e, index){
    console.log(e.altKey);
    let unit = this.state.array;
}


    
render() {
    let array = this.state.array;
    let unit = array.map((item, index) => {
                return (
                <a key={index}
                style={{display:"block"}}
                onClick={(e)=>this.click(e, index)}
                >Hello, {item}</a>
                )
            });

Comments

[Антон Спирин]

У вас в ответе две ошибки:
1. Ваш хандлер вернет функцию, но не вызовет ее.
2. Вы биндите функцию на Event это не сработает. Аргументом в хандлер он тоже не придет.
Почитайте про bind

[sinevik]

Не выводит ключь

[sinevik]

Так а как правильно?

[Coder321]

Антон Спирин, да, сори, провтыкал, не this.click.bind(e, index), а this.click(e, index)