1

问题

我有一个detail标签列表，我想details在另一个标签打开时关闭一个打开的标签。

我正在动态呈现details标签列表

堆

我正在使用 React 和钩子

我的尝试

我将 open 属性设置为 useState 并在details单击标签时更新，但这似乎不起作用。

这是代码沙箱的链接

import { useState } from "react";

const arr = [
  { name: "Jim", age: 22 },
  { name: "Sarah", age: 42 },
  { name: "Don", age: 7 }
];

export default function App() {
  const [open, setOpen] = useState(false);

  const toggleDetails = (index) => {
    setOpen(!open);
  };
  return (
    <ul>
      {arr?.map((thing, index) => (
        <details key={index} open={open} onClick={() => toggleDetails(index)}>
          <summary>{thing.name}</summary>
          {thing.age}
        </details>
      ))}
    </ul>
  );
}
4

1 回答 1

1

我在您的代码和框中添加了一个“id”键来执行以下操作，使用toggleDetails设置当前打开的详细信息的 id，然后在open属性中检查数组中的当前对象 id 是否与状态匹配。

如果是，则 open 为真，否则为假。

import { useEffect, useState } from "react";

const arr = [
  { id: "03F03BBE", name: "Jim", age: 22 },
  { id: "D37DEF7F1E7E", name: "Julie", age: 42 },
  { id: "8D61", name: "Don", age: 7 }
];

export default function App() {
  const [openId, setOpenId] = useState('');

  const toggleDetails = (thingId) => {
    setOpenId(thingId);
  };

  return (
    <ul>
      {arr?.map((thing, index) => (
        <details key={index} open={openId === thing.id} onClick={() => toggleDetails(thing.id)}>
          <summary>{thing.name}</summary>
          {thing.age}
        </details>
      ))}
    </ul>
  );
}
于 2022-01-22T08:53:29.917 回答