Javascript 未使用按钮呈现HTML元素'；React JS中的onClick事件

我是一个比较新的反应，希望在点击按钮时呈现输入表单。在button的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 ;

constuserappointment=（）=>{
函数renderHtml（）{
返回(
我想这是渲染点击
)
}
返回(
呈现输入表单




{dispatch（logout（））}>logout
)
}
导出默认用户预约；

我建议您使用

状态

保存和呈现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>
    )

}

constuserappointment=（）=>{
const[html，setHtml]=useState（null）；
函数renderHtml（）{
返回(
我想这是渲染点击
)
}
返回(
{html}
setHtml（renderHtml（））}>呈现输入表单




{dispatch（logout（））}>logout
)
}

使用布尔状态代替

renderHtml

函数。单击时，切换布尔值，并在为true时有条件地返回JSX：

const-App=（）=>{
const[show，setShow]=React.useState（false）；
返回(
设置显示（！show）}>呈现输入表单




{dispatch（logout（））}>logout
{
！显示？空：(
我想这是渲染点击
)
}
)
};
render（，document.querySelector（'.react'）

使用onClick（）等函数时，React不会从传入的函数返回任何HTML

正如其他评论者所说，您需要使用React state来管理何时显示div以及何时隐藏div。

首先设置状态，因为您正在使用功能组件

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


然后使用onClick事件并向其传递函数

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


作为回报，在h1中显示您的标题

<h1>{Heading}</h1>

{Heading}



完整代码：

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>
  )
}
    

const[Heading，setHeading]=useState（“”）
常量renderHtml=（）=>{
setHeading（“我希望在单击时呈现此内容”）
}
返回(
{标题}
呈现输入表单




{dispatch（logout（））}>logout
)
}
这绝对解决了我的问题（谢谢！），但我不明白的是，当您在元素之前编写{html}时，这是否与为其赋值相同？我也从未尝试过上述方法，因为我的印象是useState只用于更新输入表单中的值。状态可以是任何东西。它正是存储组件数据的地方。
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>
  )
}