javascript React Sticky Notes -如何仅更新一个注解而不是所有注解的颜色

cuxqih21 于 2023-04-10 发布在 Java

关注(0)|答案(2)|浏览(86)

使用React，我正在构建一个简单的Sticky Notes应用程序，您可以根据需要添加任意数量的Sticky Notes。
我试图添加功能来改变便签的颜色，但它改变了它的每一个便签。
我可以对下面的代码做些什么，以便当我单击按钮时，它只更新我从中选择颜色的便笺？
我使用状态来更新颜色，但每个便利贴都受此影响。我目前有一个下拉菜单，从便利贴显示按钮（颜色），我可以选择。
const backgroundColors = [ { color：“#FDFFB6”，}，{ color：“#FFD6A5”，}，{ color：“#FFADAD”，}，{ color：“} ];

const [currentColor, setCurrentColor] = useState('#FDFFB6')

const setColor = (color) => {
setCurrentColor(color);
}

{backgroundColors.map((color, index) => (
<button
className="w-4 h-4 rounded-full mx-1"
style={{ background: color.color }}
onClick={() =\> setColor(color.color)}
>

JavaScript

来源：https://stackoverflow.com/questions/75961842/react-sticky-notes-how-to-update-colour-of-only-one-note-and-not-all-notes

2条答案

按热度按时间

xtfmy6hx1#

这些代码还不足以非常明确地说明如何处理您的用例，但是通常您需要将颜色状态与“StickyNote”react组件的单个示例相关联。
你可以通过确保notes的标记和状态是它自己的组件来实现，然后在notes组件内实现颜色选择器按钮。如果修改currentColor应用于所有notes，这表明你正在渲染具有相同状态/在单个react组件内的所有notes。

赞(0）回复(0）举报 2023-04-10

ffx8fchx2#

你可以像那样实现这一点

const backgroundColors = [{color: "#FDFFB6"}, {color: "#FFD6A5"}, {color: "#FFADAD"}, {color: "#CAFFBF"}];
export default function App() {
    const [currentColor, setCurrentColor] = useState('#FDFFB6')

    const setColor = (color) => {
        setCurrentColor(color);
    }

    return (
        <RootStyle>
            <Stack sx={{backgroundColor: currentColor}} width={100} height={100}/>
            <Stack width={120} gap='20px'>
                {backgroundColors.map(item =>
                    <button
                        key={item.color}
                        style={{ background: item.color }}
                        onClick={() => setColor(item.color)}
                    >{item.color}</button>
                )}
            </Stack>
        </RootStyle>
    );
}

赞(0）回复(0）举报 2023-04-10

我来回答

javascript React Sticky Notes -如何仅更新一个注解而不是所有注解的颜色

2条答案

相关问题

热门标签

最新问答