未使用 React JS 中按鈕的 onClick 事件呈現的 HTML 元素

Question

我對 React 比較陌生，想在單擊按鈕時呈現輸入表單。 在按鈕的 onClick 中調用的函數適用於 console.log() 之類的東西，但不呈現 HTML 元素。 我完全不知道為什么會發生這種情況。 我正在使用功能組件。 下面是與問題相關的代碼片段。

const UserAppointment = () => {
  function renderHtml () {
    return(
      <div>
        <h1>I want this to render on click</h1>
      </div>
    )
  }

  return (
    <div>
      <button onClick={renderHtml}>Render Input forms</button>
      <br /><br /><br />
      <button onClick={()=> { dispatch(logout()) }}>Logout</button>
    </div>
  )
}
export default UserAppointment ;

Answer 1

我建議你應該使用state來保存和呈現 html：

const UserAppointment  = () => {

    const [html, setHtml] = useState(null);

    function renderHtml () {
        return(
            <div>
                <h1>I want this to render on click</h1>
            </div>
        )
    }


    return (
        <div>
            {html}
            <button onClick={(() => setHtml(renderHtml()))}>Render Input forms</button>

            <br /><br /><br />

            <button onClick={() => { dispatch(logout()) }}>Logout</button>
        </div>
    )

}

Answer 2

而不是renderHtml函數，有一個布爾狀態。 單擊時，切換布爾值，並在為 true 時有條件地返回 JSX：

 const App = () => { const [show, setShow] = React.useState(false); return ( <div> <button onClick={() => setShow(!show)}>Render Input forms</button> <br /><br /><br /> <button onClick={()=> { dispatch(logout()) }}>Logout</button> { !show ? null : ( <div> <h1>I want this to render on click</h1> </div> ) } </div> ) }; ReactDOM.render(<App />, document.querySelector('.react'));

 <script crossorigin src="https://unpkg.com/react@16/umd/react.development.js"></script> <script crossorigin src="https://unpkg.com/react-dom@16/umd/react-dom.development.js"></script> <div class="react"></div>

Answer 3

當您使用諸如onClick() 之類的事件處理程序時，React 不會從您傳入的函數中返回任何 HTML。

就像其他評論者所說的那樣，您需要使用 React 狀態來管理您的 div 何時顯示以及何時隱藏。

Answer 4

• 由於您使用的是功能組件，因此首先設置狀態。

   const [Heading, setHeading] = useState("")

• 然后使用您的 onClick 事件並將函數傳遞給它。

   <button onClick={renderHtml}>Render Input forms</button>

• 將您的狀態設置為 renderHtml 函數內的標題。

   const renderHtml =()=> { setHeading("I want this to render on click") }

• 作為回報，在 h1 中顯示您的標題。

   <h1>{Heading}</h1>

完整代碼：

const [Heading, setHeading] = useState("")
  const renderHtml =()=> {
    setHeading("I want this to render on click")
  }

  return (
    <div>
      <h1>{Heading}</h1>
      <button onClick={renderHtml}>Render Input forms</button>
      <br /><br /><br />
      <button onClick={() => { dispatch(logout()) }}>Logout</button>
    </div>
  )
}