reactjs - 如何在地图中的特定键上显示 div 元素反应

Question

我有一个列表，旁边有一个按钮：

list 1 (button)

list 2 (button)

list 3 (button)

地图内部：

 const [ show, setShow ] = useState(true);

 const showOptions = () => {
   setShow(!show);
 }

return (
  {list.map((a, i) = (
    <div key = {i} >
      {a.listAll}

      <button onClick={showOptions}>Show</button>

      {!show ?
      <div>{a.listOfOptions}</div> : null   
      }
    </div>
  ))}
 )

在按钮上单击 div 元素显示如下，但它显示在所有列表下方。如何使其仅显示在特定列表中？例如，当我单击列表 3 时，它将仅显示在列表 3 下方。

标签： reactjs

Answer 1

您应该更改状态以反映您希望显示列表的索引：

 const [ listIndex, setListIndex ] = useState(undefined);

return (
  {list.map((a, i) = (
    <div key = {i} >
      {a.listAll}

      <button onClick={() => listIndex === i ? setListIndex(undefined) : setListIndex(i)}>Show</button>

      {i === listIndex ?
      <div>{a.listOfOptions}</div> : null   
      }
    </div>
  ))}
 )