Question

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

我尝试过更改绑定，尝试过为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的属性

如果要在单击时获取当前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
}

Answer 2

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

请尝试这个，我确定这对您有用

谢谢

Answer 3

此解决方案有效。 Omar提到的内容略有修改。谢谢

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>

    );
  };
}

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

3 个答案: