javascript - 为什么按钮中的 event.target 返回空值？

Question

当我单击按钮时，我发现“名称”和“值”的所有值都未定义。我不知道为什么，我的绑定(bind)似乎是正确的。

我尝试更改绑定(bind)，尝试为 onClick 调用匿名函数并在 map 函数中传入该项目。运气不好。

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

e.target 是按钮的 DOM 引用

不需要将 name 和 value 作为 div 的属性

如果您想在单击时获取当前名称和增强的值，您可以添加绑定(bind)

{
  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
}