addEventListener在初始渲染時不作業

我試圖在React中創建簡單的手風琴。如果我打開/重繪 整個頁面，當我點擊按鈕時，onclick事件沒有被觸發。只有在我改變了代碼中的某些內容并且組件重新提交后，它才能正常作業。控制臺中沒有錯誤，說實話，我不知道這里發生了什么。先謝謝你

span class="hljs-keyword">import { useEffect } from "react" 

function FAQ （） {
  const accordionBtn = document.querySelectorAll(' .acordionTitle')
  const allTexts = document.querySelectorAll(' text')

  useEffect(() => {
    accordionBtn.forEach(function (el) {
      el?.addEventListener('click', toggleAccordion)
    })
  }, [])
 
  function toggleAccordion （el: Event) {
    
    const targetText = (el?.currentTarget as Element) 。 nextElementSibling?.classList。
    const target = (el?.currentTarget as Element) .classList

    if (! (targetText?.contains('show')) {
      accordionBtn.forEach(function (el) {
        el.classList.remove('accordionTitleActive')
        allTexts.forEach(function(el) {
          el.classList.remove('show')
        })
      })
      targetText?.add('show')
      target?.add('accordionTitleActive')
    }
  }

  return (
    <div>/span>
      <ul className='accordion'/span>>
        <li>/span>
          <h2 className='accordionTitle'/span>> Title1 </h2> 
          <div className='text show'>/span>
            內容1
          </div>內容1
        </li>/span>
        <li>/span>
          <h2 className='accordionTitle'/span>> Title2 </h2>。
          <div className='text'>/span>
            內容2
          </div>內容2
        </li>/span>
        <li>/span>
          <h2 className='accordionTitle'/span>> Title3 </h2> 
          <div className='text'>/span>
           內容3
          </div>內容3
        </li>/span>
      </ul>/span>
    </div>
  )
}

export default FAQ)

uj5u.com熱心網友回復：

當你當時檢索DOM元素的時候，這些元素甚至不在DOM中。如果你把querySelectorAll的呼叫移到useEffect，應該可以解決你的問題。請記住，useEffect回呼是在組件被繪制到螢屏上之后呼叫的。

但是正如 Andy 在上面的評論中所提到的，我們強烈建議不要直接訪問 DOM。即使你必須這樣做（我不認為在你的場景中需要這樣做），還有useRef

uj5u.com熱心網友回復：

這里是我可能的方法。它使用狀態來保持手風琴的數量，然后你就可以相應地調整子元素的類別。

span class="hljs-keyword">const { useState } = React;

function Example（） {

  //使用狀態來識別你想打開的手風琴。
  const [ show, setShow ] = useState（0）。

  //`handleClick`從accordian中抓取id。
  //然后設定狀態。
  function handleClick(e) {
    const { id } = e.target.parentNode.dataset。
    setShow(Number(id))。
  }

  //現在，對于每個元素，檢查其id是否匹配。
  //>的狀態，并顯示該文本。
  return (
    <div onClick={handleClick}> /span>
      <div data-id="1"> 
        <h3>Accordian one</h3> 
        <p className={show ==1 & & "show"}>Accordian one text< /p>
      </div>/span>
      <div data-id="2"> 
        <h3>Accordian two</h3> 
        <p className={show ==2 & & "show"}>Accordian two text</p>/span>
      </div>/span>
      <div data-id="3"/span>>
        <h3>Accordian three</h3> 
        <p className={show ==3 & & "show"}>Accordian three text< /p>
      </div>/span>
    </div>
  );
};

//Render it
ReactDOM.render(
  <Example />。
  document.getElementById("react")
);

p { display: none; }
h3:hover { cursor: pointer; }
.show { display: block; }

<script src="https://cdnjs. cloudflare.com/ajax/libs/react/17.0.1/umd/react.production.min.js">/span></script>
<script src="https://cdnjs.cloudflare. com/ajax/libs/react-dom/17.0.1/umd/react-dom.production.min.js"></script>/span>
<div id="react"> </div> 

uj5u.com熱心網友回復：

我建議 - 重構你的代碼，使用基于類的組件。并不是說現有的代碼很難看，但是當涉及到React和流暢地呈現html時，你應該使用最佳實踐。此外，通過這樣做，你還可以使用React組件生命周期的方法--這將是非常方便的！

關于類的文章很好，你可以在這里找到。

一篇關于基于類的組件的好文章。鏈接

標籤：

上一篇：_IO_puts和動態指令計數

下一篇：Nodejs-在函式之間傳遞變數（用Ndeedle發布）。