React.js:当列表中的项目被点击时，如何改变图标?

Question

我试图实现一个逻辑，其中基于单击的项目，arrow down图标更改为arrow-up，如果用户第二次单击同一行应再次更改。
我试图触发它基于点击项目的索引，但不能正常工作。
也尝试改变图标基于布尔状态的变化，像这里

const handleClick = () => {
setOpen(!open);
};

但是这种方法会改变状态中所有图标的状态。

下面是代码和沙箱链接。

import React, { useState } from "react";
import { ListGroup } from "react-bootstrap";
import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
import { faAngleUp, faAngleDown } from "@fortawesome/free-solid-svg-icons";
export const defaultListData = [
{
name: "Dapibus ac facilisis in"
},
{
name: "Morbi leo risus"
},
{
name: "Porta ac consectetur ac"
},
{
name: "Porta ac doesfvsaard  asdas"
}
];
function UserSettings() {
const [open, setOpen] = useState(false);
const [selectedIndex, setSelectedIndex] = useState(0);
const handleClick = () => {
setOpen(!open);
};
function handleTests(index) {
setSelectedIndex(index);
}
return (
<div>
{defaultListData.map((category, i) => (
<ListGroup key={category.name} variant="flush">
<ListGroup.Item
onClick={(e) => handleTests(i)}
style={{ display: "flex", gap: "50px" }}
>
{category.name}
<FontAwesomeIcon
style={{ color: "green", cursor: "pointer" }}
icon={selectedIndex === i ? faAngleDown : faAngleUp}
/>
</ListGroup.Item>
</ListGroup>
))}
</div>
);
}
export default UserSettings;

任何帮助都将不胜感激

Answer 1

您想要根据单击的项目是否已经打开来切换更改selectedIndex。更好的方法是将Item移动到具有自己的open状态的单独组件中:

const Item = (props) => {
const [open, setOpen] = useState(false);
const handleClick = () => {
setOpen((prev) => !prev);
};
return (
<ListGroup.Item
onClick={(e) => handleClick()}
style={{ display: "flex", gap: "50px" }}
>
{props.category.name}
<FontAwesomeIcon
style={{ color: "green", cursor: "pointer" }}
icon={open ? faAngleDown : faAngleUp}
/>
</ListGroup.Item>
);
};
function UserSettings() {
return (
<div>
{defaultListData.map((category, i) => (
<ListGroup key={category.name} variant="flush">
<Item category={category} />
</ListGroup>
))}
</div>
);
}

Answer 2

您需要维护每个记录签出的状态，如下例

import React, { useState } from "react";
import { ListGroup } from "react-bootstrap";
import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
import { faAngleUp, faAngleDown } from "@fortawesome/free-solid-svg-icons";
function UserSettings() {
const [open, setOpen] = useState(false);
const [defaultListData, setDefaultListData] = useState([
{
name: "Dapibus ac facilisis in",
selected: false
},
{
name: "Morbi leo risus",
selected: false
},
{
name: "Porta ac consectetur ac",
selected: false
},
{
name: "Porta ac doesfvsaard  asdas",
selected: false
}
]);
const handleClick = () => {
setOpen(!open);
};
function handleTests(index) {
let updateData = defaultListData.map((item, i) => {
return index === i ? { ...item, selected: !item.selected } : item;
});
setDefaultListData(updateData);
}
return (
<div>
{defaultListData.map((category, i) => (
<ListGroup key={category.name} variant="flush">
<ListGroup.Item
onClick={(e) => handleTests(i)}
style={{ display: "flex", gap: "50px" }}
>
{category.name}
<FontAwesomeIcon
style={{ color: "green", cursor: "pointer" }}
icon={category.selected ? faAngleDown : faAngleUp}
/>
</ListGroup.Item>
</ListGroup>
))}
</div>
);
}
export default UserSettings;

Answer 3

这是因为你的图标只有在selectedIndex === i时才被改变，这意味着，只有你点击的行将是faAngleDown。

在这种情况下，一个很好的方法是在defaultListData中添加另一个变量，如标志，并检查它以呈现正确的图标。

例:

export const defaultListData = [
{
name: "Dapibus ac facilisis in",
isOpen: false
},
{
name: "Morbi leo risus",
isOpen: false
},
{
name: "Porta ac consectetur ac",
isOpen: false
},
{
name: "Porta ac doesfvsaard  asdas",
isOpen: false
}
];