使用useRef、useState、useEffect实现点击li同步h2内容的问题

原代码核心问题 #

1. useEffect使用错误：无依赖项会导致无限触发，且change.current.children(0)是jQuery语法，原生DOM应使用children[0]——但实际上完全没必要通过ref操作DOM来更新h2内容。
2. 点击事件目标不准确：e.target可能指向li内的img或p标签，无法稳定获取到li下的p文本。
3. 状态未绑定到DOM：h2标签没有渲染title状态值，所以即使状态更新也看不到变化。
4. 未在点击时同步文本：点击li时没有将对应p的内容设置到title状态中。

修改后的完整代码 #

const Service = () => {
  const [selected, setSelected] = useState(false);
  const [title, setTitle] = useState("");

  const Changer = (e) => {
    e.preventDefault();
    // 获取点击的li元素，再找到内部的p标签
    const liElement = e.currentTarget;
    const pText = liElement.querySelector('p').textContent.trim();
    // 同步文本到title状态
    setTitle(pText);
    // 切换选中状态
    setSelected(current => !current);
  };

  return (
    <section className={selected ? "serviceClicked" : "services"}>
      <h1>Our Services</h1>
      <div className='service-content'>
        <div className='service-text'>
          {/* 绑定title状态到h2 */}
          <h2>{title}</h2>
          <p>
            Syse infrans att dedade. Redar 
            fäsat. Älogi hypol. Antere 
            nydavarat och hemil. 
            Dist kyning. Kroska 
            bröllopskoordinator. Teletotal. 
            Mor tin. 
          </p>
          <p>
            Spejörar befaladat. Lavis 
            kvasideledes. 
            Dande dak. Anteck ur dick. 
            Skurkstat larad henifiera. Belogi 
            koliga selig. 
          </p>
        </div>
        <div className='service-list'>
          <ul id='top-list'>
            <li onClick={Changer}>
              <img src={oby} />
              <p>ob/gyn</p>
            </li>
            <li onClick={Changer}>
              <img src={neuro} />
              <p>neurology</p>
            </li>
            <li onClick={Changer}>
              <img src={peds} />
              <p>pediatrics</p>
            </li>
          </ul>
          <ul id='bottom-list'>
            <li onClick={Changer}>
              <img src={dental}/>
              <p>dental care</p>
            </li>
            <li onClick={Changer}>
              <img src={cardio} />
              <p>cardiology</p>
            </li>
            <li onClick={Changer}>
              <img src={ent} alt='E.N.T' />
              <p>ent</p>
            </li>
          </ul>
        </div>
      </div>
    </section>
  );
};

关键改动说明 #

• 移除了不必要的useRef和useEffect，改用状态驱动DOM更新，符合React的设计理念。
• 使用e.currentTarget替代e.target，确保始终获取到点击的li元素（不管点击的是li内的img还是p）。
• 通过querySelector('p')获取li内的p标签文本，同步到title状态。
• h2标签直接渲染title状态值，实现内容同步。

内容的提问来源于stack exchange，提问作者Hollas