React.js：單擊串列中的專案時如何更改圖示？

我正在嘗試實作一個邏輯，根據單擊的專案，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;

任何幫助將不勝感激

uj5u.com熱心網友回復：

您想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>
  );
}

uj5u.com熱心網友回復：

您需要維護每條記錄的狀態，請查看以下示例

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;

uj5u.com熱心網友回復：

發生這種情況是因為您的圖示僅在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
  }
];

uj5u.com熱心網友回復：

一種解決方案是為串列本身設定一個狀態，并在每個專案中添加一個標志，無論它是否打開。

https://codesandbox.io/s/hungry-cookies-4vtz4b

標籤：javascript 反应

上一篇：合并物件陣列中的物件洗掉重復項

下一篇：libcurl回應標頭缺少Content-Length欄位