Question

我对React还是比较陌生的，我想单击按钮即可呈现输入表单。在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 ;

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

当您使用{em> onClick（）之类的event handlers时，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>
  )
}

无法在React JS中使用按钮的onClick事件呈现HTML元素

4 个答案: