Useref、usestate、useEffect 问题

问题描述

我正在尝试创建一个 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标签的任何值。