Я буду использовать аналогию состояния включения / выключения лампочки. Текстовое поле считается включенным (или активным), когда оно синее, и выключенным, когда оно черное.
В настоящее время у меня есть массив текста, который я отображаю, и значения передаются компоненту. Этот компонент управляет локальным состоянием текста, при каждом щелчке по тексту он будет щелкать синим цветом в основном (вкл / выкл)
У меня есть глобальное состояние, которое я хотел бы иметь, если какой-либо элемент синего цвета , Моя проблема заключается в том, что если «text_one» включен, и я нажимаю «text_two», мне бы очень хотелось, чтобы «text_one» отключился, и «text_two» включился и продолжил иметь глобальное состояние. По сути, только один текст может быть синим за один раз. Если щелкнуть текстовый компонент, он станет синим, а остальные отключатся, если они синего цвета.
в устной форме логарифм c (я полагаю) будет
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;