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

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

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 2

您想根據單擊的項目是否已打開來切換更改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 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
  }
];