在 React JS 中，没有使用按钮的 onClick 事件呈现 HTML 元素答案

【问题标题】：HTML elements not rendering with button's onClick event in React JS在 React JS 中，没有使用按钮的 onClick 事件呈现 HTML 元素
【发布时间】：2021-01-30 06:10:57
【问题描述】：

我对 React 比较陌生，想在单击按钮时呈现输入表单。在按钮的 onClick 中调用的函数适用于 console.log() 之类的东西，但不会呈现 HTML 元素。我完全不知道为什么会这样。我正在使用功能组件。下面是与问题有关的代码sn-p。

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 ;

【问题讨论】：

标签： javascript html reactjs state

【解决方案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>
    )

}

【讨论】：

这绝对解决了我的问题（谢谢！）但我不明白的是，当您在元素之前编写 {html} 时，与分配一个值吗？我也从未尝试过上述方法，因为我的印象是 useState 仅用于更新输入表单内的值。
状态可以是任何东西。它只是您存储组件数据的地方。

【解决方案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>

【讨论】：

【解决方案3】：

当您使用event handlers 时，例如 onClick()，React 不会从您传入的函数返回任何 HTML。

就像其他评论者所说，您需要使用 React 状态来管理您的 div 何时显示和何时隐藏。

【讨论】：

【解决方案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>
  )
}

【讨论】：