Почему кнопка возвращает нулевые значения для моего event.target в моей кнопке?

Question

Когда я нажимаю кнопку, я получаю, что все значения не определены для «имени» и «значения».Я не уверен, почему, моя привязка кажется правильной.

Я пытался изменить привязки, я пытался вызвать анонимную функцию для onClick и передать элемент в моей функции карты.Не повезло.

import React, { Component } from 'react'

const starterItems = [{ id: 1, name: 'longsword', enhancement: 4 },
{ id: 2, name: 'gauntlet', enhancement: 9 },
{ id: 3, name: 'wizard\'s staff', enhancement: 14 }];


export default class Items extends Component {
  constructor(props) {
    super(props)
    this.handleScoreChange = this.handleScoreChange.bind(this);
    this.state = {
      items: starterItems
    }
  }
  handleScoreChange(e){
    let { name, value } = e.target;
    const id = name;
const newScore = value++;
const items = this.state.items.slice();
items.forEach((item) => {
  if (item[id] === name){
    item.enhancement = newScore
  }
});
this.setState(items);
};



render() {
return (
  <div>
    <h3 data-testid="title">Items</h3>
    {this.state.items.map(item => (
      <div key={item.id}>
        <div name={item.name}data-testid="item">{item.name}</div>
        <div name={item.enhancement}data-testid="enhancement" value= 
{item.enhancement}>{item.enhancement}
        </div>
        <button onClick={this.handleScoreChange}>Enhance</button>
       </div>
    ))}
  </div>

   );

  };
 }

Я ожидаю, что стоимость предмета, пройденного до + 1

Answer 1

 <button onClick={()=>this.handleScoreChange(...item)}>Enhance</button>

пожалуйста, попробуйте это, я уверен, что это будет работать для вас

спасибо

Answer 2

Это решение сработало.Небольшая модификация из того, что упоминал Омар.Спасибо

import React, { Component } from 'react'

const starterItems = [{ id: 1, name: 'longsword', enhancement: 4 },
{ id: 2, name: 'gauntlet', enhancement: 9 },
{ id: 3, name: 'wizard\'s staff', enhancement: 14 }];


export default class Items extends Component {
  constructor(props) {
    super(props)
    this.state = {
      items: starterItems
    }
  }
  enhanceItem(passedItem) {
    const newScore = passedItem.enhancement + 1;
    const items = this.state.items.slice(); /* creates a copy of state that we can change */
    items.forEach((item) => {
      if (item.id === passedItem.id) {
        return item.enhancement = newScore
      }
    });
    this.setState(items);
  };
  render() {
    return (
      <div>
        <h3 data-testid="title">Items</h3>
        {
          this.state.items.map(item => {
            const onClick = this.enhanceItem.bind(this, item)
            /* this line above binds the item with the onClick Function */
            /* notice below, I had to put a return since I added the above code */
            return (
              <div key={item.id}>
                <div data-testid="item">{item.name}</div>
                <div data-testid="enhancement">{item.enhancement}</div>
                {/* We can use the "data=testid" as a way to grab an item, since it won't impact the html any */}
                <button onClick={onClick}>Enhance</button>
              </div>
            )
          })};
        </div>

    );
  };
}

Answer 3

e.target является ссылкой DOM для кнопки

, включая name и value, так как атрибуты для div не нужны

Если вы хотите получить значениядля текущих name и enhancement при нажатии вы можете добавить привязку

{
  this.state.items.map(item => {
    const onClick = this.handleScoreChange.bind(this, item.name, item.enhancement)
    return (
      <div key={item.id}>
        <div name={item.name}data-testid="item">{item.name}</div>
        <div name={item.enhancement}data-testid="enhancement" value={item.enhancement}>{item.enhancement}</div>
        <button onClick={onClick}>Enhance</button>
      </div>
    )
  )
}
...
handleScoreChange(name, enhancement) {
  // your logic here
}