Question

所以，我上课是Compopnent：

 state = {
    tokens: [
    {
      name: "first",
      value: 3
    },
    {
      name: "second",
      value: 2
    },
    {
      name: "third",
      value: 4
    }
  ]
  }
  handleClick = (name, id) => {
    const newState = this.state.tokens.map((token => {
    console.log(token.name)
    }))
  }
render() {
    const token = this.state.tokens;

    const tokenList = token.map(t => {
      return (
      <div value={t.name} onClick={() => this.handleClick(t.name, t.value)}>
        <img src=""/>

        </div>
      )
    })

我需要做的-单击后-从单击1的{{1}}中减去value。所以-前单击“第一个”令牌后，我希望他的token等于value。到目前为止，我已经完成了上述工作。我不知道该怎么做，我是ReactJS的新手，所以在此先感谢您的帮助！

Answer 1

您必须在状态tokens中找到与在onclick处理程序中传递的参数具有name相同的对象。然后，您将不得不更改它的值-减小它的值（value--），但是您必须意识到您无法更改状态。

 handleClick = name => () => {
    const { tokens } = this.state;
    const clickedToken = tokens.find(token => token.name === name);
    clickedToken.value--;
    const clickedTokenIndex = tokens.indexOf(clickedToken);
    const newTokens = [
      ...tokens.slice(0, clickedTokenIndex),
      clickedToken,
      ...tokens.slice(clickedTokenIndex + 1)
    ];

    this.setState({ tokens: newTokens });
  };

代码和框链接： https://codesandbox.io/s/92yz34x97w

Answer 2

首先，您的代码有些错误。 1-您有一个令牌数组，然后您正在映射列表，但是没有索引的键，这将导致奇怪的行为，我现在使用键来改进您的令牌列表。

2.-您可以单击并更改令牌列表的状态，这将触发组件的重新加载。

state = {
    tokens: [
    {
      name: "first",
      value: 3,
      id: 1
    },
    {
      name: "second",
      value: 2,
      id: 2
    },
    {
      name: "third",
      value: 4,
      id: 3
    }
  ]
  }
  handleClick = (name, id) => {
        const { tokens} = this.state;
        const newState = tokens.map((token => {
                if(token.id === id) {
                        token.value--;

                }
        return token;
    }))
  }
render() {
    const token = this.state.tokens;

    const tokenList = token.map(t => {
      return (
      <div key={t.key} value={t.name} onClick={() => this.handleClick(t.name, t.value, t.key)}>
        <img src=""/>

        </div>
      )
    })

更新状态为onClick ReactJS的项目

2 个答案: