时间戳

首页 > 解决方案 > React.js 切换隐藏显示显示问题

javascript - React.js 切换隐藏显示显示问题

问题描述

我试图 React 切换显示隐藏并遇到问题。

我用 map 函数调用了我的数组。然后我使用切换功能进行了打开隐藏的情况，但问题从这里开始。一旦我单击任何项​​目，整个数组就会显示和隐藏。

我在这里做错了什么？我只想查看我单击的项目的隐藏显示状态，但它们都已列出。

在此处输入图像描述

我的代码：

export default function App() {
  const [show, setShow] = useState(false);
  const toggleHandler = () => {
    setShow(!show);
  };

  return (
    <div className="App">
      {example.map((item) => (
        <>
          <div onClick={toggleHandler}>
            <p style={{ margin: 0, fontWeight: "bold" }}>
              {`${item.year} - Total: `} <span>{item.price}</span>
            </p>
          </div>
          {show ? <div>{item.monthlyInstallment}</div> : ""}
        </>
      ))}
    </div>
  );
}

我的示例文件：CodeSandbox

标签： javascriptreactjs

解决方案

目前，状态布尔值对所有项目都是通用的。

您可以创建具有自己的本地show状态的项目组件。

如果您不想创建子组件，您可以使用地图，其键将是项目id作为状态，值将是布尔值show

沙盒：https ://codesandbox.io/s/toggle-example-forked-ijt82?file=/src/App.js

推荐阅读