如何將 class 切換到 React.js 中的每個 li 元素？

Question

單擊子按鈕時如何將 class 切換到父li元素。

li元素也是動態項。

這是我到目前為止嘗試過的

export default function About() { 
  const [show, setShow] = React.useState(); 
  return (
    <ul className="list"> 
      <li className={`list-item ${show ? "on" : ""}`} >
        <button onClick={() => setShow(!show)}>
          Toggle
        </button> 
      </li>
      <li className={`list-item ${show ? "on" : ""}`} >
        <button onClick={() => setShow(!show)}>
          Toggle
        </button> 
      </li> 
    </ul>
  );
}

問題是當單擊按鈕時，所有li一起切換。 我希望他們單獨切換。

請幫忙。

Answer 1

看起來您有 1 個變量show來跟蹤N個<li>的 state。 你看到問題了嗎？

如果每個<li>都需要有自己的 state，這可能是一個好兆頭，您需要創建一個新組件，也許是<ListItem /> ？ 這樣，每個<ListItem />都會有自己的useState掛鈎來處理 state 更改。

function About() {
  return (
    <ul className="list">
      <ListItem />
      <ListItem />
    </ul>
  );
}

function ListItem() {
  const [show, setShow] = React.useState(false);

  return (
    <li className={`list-item ${show ? "on" : ""}`}>
      <button onClick={() => setShow(prev => !prev)}>Toggle</button>
    </li>
  );
}

Answer 2

也許你可以試試列表？

export default function About() { 
  const [activeId, setActiveId] = React.useState(null);
  const list = ['Toggle', 'Toggle']
  
  const onBtnClick = (index) => {
    if (activeId === index) {
      setActiveId(null)
    } else {
      setActiveId(index)
    }
  }
  
  return (
    <ul className="list"> 
      {list.map((item, idx) => (
        <li key={idx} className={`list-item ${activeId === idx ? "on" : ""}`} >
          <button onClick={() => onBtnClick(idx)}>
            {item}
          </button> 
        </li>
      ))}
    </ul>
  );
}

Answer 3

如果您希望它們單獨切換，則需要兩個單獨的show state 變量。

嘗試這個：

export default function About() { 
  const [showA, setShowA] = React.useState(); 
  const [showB, setShowB] = React.useState(); 
  return (
    <ul className="list"> 
      <li className={`list-item ${showA ? "on" : ""}`} >
        <button onClick={() => setShowA((orig) => !orig)}>
          Toggle
        </button> 
      </li>
      <li className={`list-item ${showB ? "on" : ""}`} >
        <button onClick={() => setShowB((orig) => !orig)}>
          Toggle
        </button> 
      </li> 
    </ul>
  );
}