reactjs - ReactJS如何在单击数组中的一个组件时“重置状态”映射的组件数组

问题描述

我将在整个过程中使用“类似灯泡”的开/关状态的类比。文本字段在蓝色时被视为打开（或活动），在黑色时被视为关闭。

我目前有一个文本数组，我通过它映射，然后将值传递给一个组件。该组件管理文本的本地状态，对于单击的每个文本，它基本上都会闪烁蓝色（开/关）

我有一个全局状态，如果任何项目是蓝色的，我希望它是真实的。我的问题是，如果打开“text_one”，然后单击“text_two”，我实际上希望关闭“text_one”，打开“text_two”，并继续打开全局状态。本质上，一次只能有一个文本是蓝色的。如果您单击一个文本组件，它将变为蓝色，如果它们是蓝色的，则将其关闭。

口头上，逻辑（我假设）将是

if(global && local) then blue
if (global && !local) then black

如果我理解正确反应，如果状态发生变化，它应该重新渲染所有文本组件。在组件上使用onClick时，我可以更改我单击的任何内容的状态，但我不确定如何更改其余部分的状态以将它们改回黑色。

我的源代码如下，可以在 codesandbox.io 上找到。

https://codesandbox.io/s/distracted-violet-tc3lh?fontsize=14&hidenavigation=1&theme=dark

import React, { useState, useEffect } from "react";
import "./styles.css";

const App = () => {
  const [texts, setTexts] = useState(["text_one", "text_two"]);
  const [globalActive, setGlobalActive] = useState(false);

  const TextEntry = ({ value }) => {
    const [localActive, setLocalActive] = useState(false);

    return (
      <h1
        onClick={() => {
          setLocalActive(!localActive);
          setGlobalActive(true);
        }}
        style={{
          color: localActive && globalActive ? "blue" : "black"
        }}
      >
        {value}
      </h1>
    );
  };

  return (
    <div className="App">
      {texts.map((text, index) => {
        return <TextEntry value={text} />;
      })}
    </div>
  );
};

export default App;

标签： reactjslogicreact-hooks

reactjs - ReactJS如何在单击数组中的一个组件时“重置状态”映射的组件数组

问题描述

解决方案

推荐阅读