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就綽綽有余了。