在功能组件中响应点击事件

Question

我尝试添加一个 onClick 事件，它将在我的功能组件中显示/隐藏一个 div，你能帮忙解释为什么它不起作用吗？

export default function OnClickFunctionalComponent (){

    const [showStatements, setShowStatements] = useState(false);
    const onClick = () => setShowStatements(true)

    return(
        <Button onClick={onClick}> Show All</Button>

        { showStatements ? <AllStatements /> : null }
    )
}

const AllStatements = () => (
    <div>
        Some Results
    </div>
)

我是否错误地使用了 useState 挂钩？

Answer 1

react 中不能返回多个元素。它可能只包含一个父元素。

import React from 'react'

export default function OnClickFunctionalComponent () {
    const [showStatements, setShowStatements] = React.useState(false);
    const onClick = () => setShowStatements(true)

    let allStatements
    if (showStatements) {
        allStatements = <div>Some Results</div>
    }

    return(
        <div>
            <button onClick={onClick}> Show All</button>

              { allStatements }
        </div>
    )
}

当然你可以将条件渲染放在元素内部，但我更喜欢这种方式，因为它看起来更清晰。

有关更多信息，请阅读此页面：https://reactjs.org/docs/conditional-rendering.html

此外，除非您创建了一个名为 Button 的组件，否则

Button

也不存在。在 HTML 中，它以小写形式书写，因此

button

。

Answer 2

据我了解，你想切换 div，对吧？你就快到了，问题是当你点击按钮时，你总是将

showStatements

设置为

true

。要进行切换，您应该对之前状态的值取反。像这样的东西应该有效：

const onClick = () => setShowStatements(prevShow => !prevShow)

我使用回调，因为如果您直接访问状态中的先前值，某些操作可能无法正常工作。

Answer 3

我已经像这样修改了箭头函数中的代码，并且还绑定在反应片段中，以便我们可以在反应中返回多个元素并且其工作正常

import { useState } from "react";

const  App = () => {

const [showStatements, setShowStatements] = useState(false);

const onClick = () => setShowStatements(toggle => !toggle)

return(
   <>
     <button onClick={onClick}> Show All</button>
     { showStatements ? <AllStatements /> : null }
  </>
)

}

const AllStatements = () => (
  <div>
      Some Results
  </div>

）

export default App;