reactjs 功能组件中的React onClick事件

tf7tbtn2 于 2022-12-26 发布在 React

关注(0)|答案(2)|浏览(235)

我尝试添加一个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钩子？

reactjs

来源：https://stackoverflow.com/questions/65543136/react-onclick-event-in-functional-component

2条答案

按热度按时间

iezvtpos1#

不能在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。

赞(0）回复(0）举报 2022-12-26

4nkexdtk2#

正如我所理解的，你想切换div，对吗？你几乎已经做到了，问题是当你点击按钮时，你总是把showStatements设置为true。要切换，你应该对之前状态下的值取反。类似这样的操作应该可以工作：

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

我之所以使用回调函数，是因为如果直接访问处于该状态的前一个值，可能会出现一些问题。

赞(0）回复(0）举报 2022-12-26

我来回答

reactjs 功能组件中的React onClick事件

2条答案

相关问题

热门标签

最新问答