为什么按钮在我的按钮中为我的 event.target 返回空值？答案

【问题标题】：Why Is the button returning null values for my event.target in my button?为什么按钮在我的按钮中为我的 event.target 返回空值？
【发布时间】：2019-06-25 16:57:03
【问题描述】：

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

我尝试更改绑定，尝试为 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 的项目的值

【问题讨论】：

标签： javascript reactjs events binding

【解决方案1】：

此解决方案有效。对奥马尔所说的稍作修改。谢谢

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>

    );
  };
}

【讨论】：

【解决方案2】：

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

请试试这个，我相信这对你有用

谢谢

【讨论】：

感谢您的帮助，但它说我试图传播一些由于某种原因无法传播的东西。
好的，但我认为我的建议类似于上面的答案:-)

【解决方案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
}

【讨论】：