像多个元素的计数器答案

【问题标题】：Like counter for multiple elements像多个元素的计数器
【发布时间】：2020-07-19 22:22:28
【问题描述】：

所以我为喜欢创建了一个计数器。我总共有 3 个元素，我希望当用户单击其中一个元素时，确切的元素是递增的，但到目前为止，如果单击一个元素，所有元素都会递增，请帮助我

class home extends Component {
  constructor(props) {
    super(props);
    this.state = {
      likeCounter: 0,
    };
  }

  counter = () => {
    this.setState((prevState) => ({
      likeCounter: prevState.likeCounter + 1,
    }));
  };

  render() {
    return (
      <>
        <button className="click" onClick={this.counter}>
          {this.state.likeCounter} likes
        </button>

        <button className="click" onClick={this.counter}>
          {this.state.likeCounter} likes
        </button>

        <button className="click" onClick={this.counter}>
          {this.state.likeCounter} likes
        </button>
      </>
    );
  }
}

【问题讨论】：

您的代码中有许多语法错误。也许先解决这些？这是一个简短的列表：this.state{ 应该是 this.state = {，this.setState((prevState)=>{ 应该是 this.setState((prevState)=>({，结束标签使用 / 而不是 \ 所以应该是 </button>...
@Dominik 完成，抱歉我是用笔记本电脑在手机上输入的，所以我没有注意到，谢谢。但是当我点击其中一个按钮时，如何让它为每个而不是所有的都增加
仍有问题。我已为您修复了它们，如果这是问题所在，请随时恢复。
Duplicate id （几乎可以肯定）是您的问题，使用类名并使用该类遍历元素。 id 必须在文档中是唯一的。
@David 说恢复 Monica 谢谢

标签： javascript reactjs setstate

【解决方案1】：

我会这样尝试：

import React, {Component} from "react";

class Home extends Component {
  constructor(props) {
    super(props);
    this.state = {};
  }

  counter = (counter) => {
    this.setState((prevState) => ({
      [counter]: prevState[counter] ? prevState[counter] + 1 : 1,
    }));
  };

  render() {
    return (
      <>
        <button onClick={() => this.counter(1)}>
          {this.state[1] ? this.state[1] : 0} likes
        </button>

        <button onClick={() => this.counter(2)}>
          {this.state[2] ? this.state[2] : 0} likes
        </button>

        <button onClick={() => this.counter(3)}>
          {this.state[3] ? this.state[3] : 0} likes
        </button>

        <button onClick={() => this.counter(4)}>
          {this.state[4] ? this.state[4] : 0} likes
        </button>
      </>
    );
  }
}

export default Home;

在您将有关“如何使这三个按钮工作”的问题更改为“我有很多按钮，我将如何做到这一点”之后，我建议您创建一个可以执行此类操作的组件并多次包含它（写成函数式组件）：

import React, { useState } from "react";

function LikeBtn() {
  const [likes, setLikes] = useState(0);

  return <button onClick={() => setLikes(likes + 1)}>{likes} likes</button>;
}

export default LikeBtn;

然后像这样在您的应用中使用它：

import React from "react";
import LikeBtn from "./LikeBtn";

export default function App() {
  return (
    <div>
      <LikeBtn />
      <LikeBtn />
      <LikeBtn />
      <LikeBtn />
      <LikeBtn />
    </div>
  );
}

【讨论】：

它工作了，谢谢，但是在我有超过 100 个按钮的情况下，我会创建 100 个状态（likeCounter1：0，）还是有办法解决它
我更新了答案。如果这对您有用，请随时将其标记为答案
感谢您的时间和帮助，将立即实施

【解决方案2】：

如果您打算使用多个赞按钮，您应该创建一个可重复使用的按钮。只需从Home 组件中提取点赞按钮的功能即可。

class LikeBtn extends Component {
  constructor(props) {
    super(props);
    this.state = { likes: 0 };
  }

  inc = () => {
    this.setState(prvState => ({
      likes: prvState.likes + 1
    }));
  };

  render() {
    return (
      <>
        <button onClick={e => this.inc()}>{this.state.likes} likes</button>
      </>
    );
  }
}

const App = () => {
  return (
    <div>
      <LikeBtn /> <LikeBtn /> <LikeBtn /> <LikeBtn /> <LikeBtn /> <LikeBtn />
    </div>
  );
};

您可以向LikeBtn 添加更多功能，例如添加回调函数以将赞返回给父组件...
看看这个example

【讨论】：

非常感谢您的帮助