Useref、usestate、useEffect 问题

Question

我正在尝试创建一个 function 选择一个 HTML 元素并使用 ref 将其中的值更改为另一个元素中的值，state 和效果挂钩

const Service = () => {
const [selected, setSelected] = 
 useState(false);
let change = useRef(null);
const[title, setTitle] = useState("");
useEffect(() => {
setTitle(change.current.children(0))
})
const Changer = (e)=>{
e.preventDefault()
const style = e.target;
if(selected === false){
  
  console.log(`you clicked ${style}`);
}
setSelected( current => !current);
// let style={background: selected ? 
'#6EEFB1' : ''};
// if (selected === true){
//   setSelected(false)
//   // let style= {styleObject.li}
  
// }else{
//   setSelected(true)
// }
}
return(
 <section className={selected ? 
 "serviceClicked" : "services"}>
  <h1>Our Services</h1>
  <div className='service-content'>
    <div className='service-text' ref=. 
    {change}>
    <h2></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} />
          {/* <div></div> */}
          <p>ob/gyn</p>
        </li>
        <li  onClick={Changer}>
          <img src={neuro} />
          {/* <div></div> */}
          <p>neurology</p>
        </li>
        <li  onClick={Changer}>
          <img src={peds}  />
          {/* <div></div> */}
          <p>pediatrics</p>
        </li>
      </ul>
      <ul id='bottom-list'>
        <li  onClick={Changer}>
          <img src={dental}/>
          {/* <div></div> */}
          <p>dental care</p>
        </li>
        <li  onClick={Changer}>
          <img src={cardio} />
          {/* <div></div> */}
          <p>cardiology</p>
        </li>
        <li  onClick={Changer}>
          <img src={ent} alt='E.N.T' />
          {/* <div></div> */}
          <p>ent</p>
        </li>
      </ul>
    </div>
  </div>
</section>

) };

h2标记旨在在单击时采用 li 元素下p标记的值，我已经弄清楚了如何在单击li元素时显示服务文本中的内容。

令人不安的是如何将h2标签的值更改为单击li元素的p标签的任何值。

Answer 1

CodeSandBox 示例

您可以简单地使用您的useState来完成所有这些操作，而不是使用useEffect 、 useRef 。

我创建了一个常量来让我/你的生活更轻松，并且只是 map 虽然元素（你不需要这个，但我会推荐它）

const IMAGES = [
  { src: "oby", name: "ob/gyn" },
  { src: "neuro", name: "neurology" },
  { src: "peds", name: "pediatrics" },
  { src: "dental", name: "dental care" },
  { src: "cardio", name: "cardiology" },
  { src: "ent", name: "ent" }
];

<section className={title ? "serviceClicked" : "services"}>
      <h2>{title}</h2>
      ...
      <ul id="top-list">
            {IMAGES.map(({ src, name }) => {
              return (
                <li
                  key={name}
                  onClick={() => {
                    setTitle(name);
                  }}
                >
                  <img src={src} />
                  <h3>{name}</h3>
                </li>
              );
            })}
       </ul>
       ...
</section>

如果需要直接与元素交互，你真的会想使用useRef ，否则当只处理数据时， useState/useEffect就绰绰有余了。