时间戳

首页 > 解决方案 > 如何获取 React.js 中选中复选框的数量？

javascript - 如何获取 React.js 中选中复选框的数量？

问题描述

不久前我开始学习 React。决定制作某种“生活清单”作为我的初学者项目之一。我一直在核心中使用功能组件。

供参考：

  1. 我将 data.js 作为存储“动作”、“表情符号”和唯一 ID 的对象数组。
  2. 我将它导入到我的 App.js 中。
const App = () => {
  //Looping over data
  const items = data.map((item) => {
    return (
      <ChecklistItem action={item.action} emoji={item.emoji} key={item.id} />
    );
  });

  return (
    <>
      <GlobalStyle />
      <StyledHeading>Life Checklist</StyledHeading>
      <StyledApp>{items}</StyledApp>
      <h2>Overall number: {data.length}</h2>
    </>
  );
};

export default App;

这是我的<ChecklistItem/>组件：

const ChecklistItem = ({ action, emoji }) => {
  //State
  const [isActive, setIsActive] = useState(false);

  //Event Handlers
  const changeHandler = () => {
    setIsActive(!isActive);
  };

  return (
    <StyledChecklistItem isActive={isActive}>
      <input type="checkbox" checked={isActive} onChange={changeHandler} />
      <StyledEmoji role="img">{emoji}</StyledEmoji>
      <StyledCaption>{action}</StyledCaption>
    </StyledChecklistItem>
  );
};

export default ChecklistItem;

到目前为止，我对功能感到满意，但我需要显示在父组件中选择了多少“活动”清单项目，<App/>例如“您已从 . 中选择 X 个项目{data.length}。我该如何实现？

我假设我需要提升状态，但还不明白如何正确实施。

标签： javascriptreactjs

解决方案

你可以通过简单地创建一个状态来存储这个特定count的活动项目来做到这一点。

为此，您需要将<App/>组件更新为类似这样的内容

const App = () => {
  const [activeItemsCount, setActiveItemsCount] = useState(0);

  //Looping over data
  const items = data.map((item, index) => {
    return (
      <ChecklistItem
        key={index}
        action={item.action}
        emoji={item.emoji}
        setActiveItemsCount={setActiveItemsCount}
      />
    );
  });

  return (
    <>
      <h1>Life Checklist</h1>
      <div>{items}</div>
      <div>Active {activeItemsCount} </div>
      <h2>Overall number: {data.length}</h2>
    </>
  );
};

export default App;

然后在您的<ChecklistItem />组件中，您需要接受该setActiveItemsCount功能，以便您可以更改activeItemsCount.

import React, { useState, useEffect } from "react";

const ChecklistItem = ({ action, emoji, setActiveItemsCount }) => {
  const [isActive, setIsActive] = useState(false);

  const changeHandler = () => {
    setIsActive(!isActive);
  };

  useEffect(() => {
    if (!isActive) {
      setActiveItemsCount((prevCount) => {
        if (prevCount !== 0) {
          return prevCount - 1;
        }

        return prevCount;
      });
    }

    if (isActive) {
      setActiveItemsCount((prevCount) => prevCount + 1);
    }
  }, [isActive, setActiveItemsCount]);

  return <input type="checkbox" checked={isActive} onChange={changeHandler} />;
};

export default ChecklistItem;

通过使用useEffect和检查isActive和0值，您可以通过按下复选框很好地增加或减少活动计数。

推荐阅读