未使用 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>
  )
}