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)

我使用回调是因为如果您直接访问状态中的前一个值，某些事情可能不起作用。

在功能组件中反应 onClick 事件

2 个答案: