时间戳

首页 > 解决方案 > 像多个元素的计数器

javascript - 像多个元素的计数器

问题描述

所以我为喜欢创建了一个计数器。我总共有 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>
      </>
    );
  }
}

标签： javascriptreactjssetstate

解决方案

我会这样尝试：

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>
  );
}

推荐阅读