javascript - 如何在 ReactJS 中单击时仅切换元素集合中的一个元素？

Question

我只想切换最后一个跨度元素，上面写着“要为 {user.id} 切换的文本”，我只想为特定的 li 元素切换此元素，而不是所有 li 元素。目前我是如何设置的，由于状态的工作方式，它将切换所有 li 元素的 span 元素。我正在考虑通过 map 函数传递索引并引用索引来切换我想要的元素，但我该怎么做呢？因为状态是为所有 li 元素设置的，所以有没有比使用状态更好的方法来做到这一点？

我知道使用 vanilla JS 我可以只使用 getElementById 并将其样式设置为隐藏或阻止。但是对于 React，我不确定处理这个问题的最佳方法，因为我被告知我们希望在可以使用 React 时避免使用 ID。然后就使用 useRef() 而言，我不确定它在这里是否真的有效，因为我需要为每个元素创建一个引用，我不知道我可以动态地做到这一点，或者这是否是最佳实践就此而言？

谢谢!

import React, { useState } from 'react';

const Users = [
  { id: 1, name: 'Andy', age: 32 },
  { id: 2, name: 'Bob', age: 30 },
  { id: 3, name: 'Tom Hulk', age: 40 },
  { id: 4, name: 'Tom Hank', age: 50 },
  { id: 5, name: 'Audra', age: 30 },
  { id: 6, name: 'Anna', age: 68 },
  { id: 7, name: 'Tom', age: 34 },
  { id: 8, name: 'Tom Riddle', age: 28 },
  { id: 9, name: 'Bolo', age: 23 },
];

function Test() {

  const [toggle, setToggle] = useState('none');

  function toggleFunction () {
      toggle === 'none' ? setToggle('block') : setToggle('none')
  }

  return (
    <div className="container">

      <div className="user-list">
        {
          Users.map((user) => (
            <li key={user.id} className="user">          
              <button onClick={toggleFunction}>Button</button>
              <span className="user-id">{user.id}</span>
              <span className="user-name">{user.name}</span>
              <span className="user-age">{user.age} year old</span>
              <span style={{display: toggle}}>text to toggle for {user.id}</span>
            </li>
          ))
         }
      </div>
    </div>
  );
}

export default Test;

Answer 1

您想跟踪每个元素的切换状态。

export default function App() {
  const [toggle, setToggle] = React.useState({});

  function toggleFunction(id) {
    setToggle({
      ...toggle,
      [id]: !toggle[id],
    });
  }

  return (
    <div className="container">
      <div className="user-list">
        {Users.map((user) => (
          <li key={user.id} className="user">
            <button onClick={() => toggleFunction(user.id)}>Button</button>
            <span className="user-id">{user.id}</span>
            <span className="user-name">{user.name}</span>
            <span className="user-age">{user.age} year old</span>
            <span style={{ display: toggle[user.id] ? 'block' : 'none' }}>
              text to toggle for {user.id}
            </span>
          </li>
        ))}
      </div>
    </div>
  );
}

---

toggle 通过将项目的 id 与其切换状态相关联(我们使用 bracket notation 来存储此信息)来跟踪哪些项目被切换或未被切换，例如

{8: true, 9: true}

然后在渲染中，我们使用 id 读取项目的切换值，以使用 toggle[user.id]

检查它是否被切换