单击 onShowMoreClick 后如何显示模式？

Question

<OneProfileKeyCard
    title="Qualification"
    showMoreText="See all qualifications"
    onShowMoreClick={() => console.log('show more')}
>
    Creating, communicating, and implementing the organization&apos;s vision, mission, and overall direction Leading the development and implementation of the overall organization&apos;s strategy.
</OneProfileKeyCard>

import React from 'react'
import './OneProfileKeyCard.scss'

type Props = {
    title: string
    showMoreText: string
    onShowMoreClick: () => void
}

export const OneProfileKeyCard: React.FC<Props> = ({
    title,
    showMoreText,
    onShowMoreClick,
    children
}) => (
    <div className="one-profile-key-card">
        <h3>{ title }</h3>
        <div>
            { children }
        </div>
        <button type="button" onClick={onShowMoreClick}>
            { showMoreText }
        </button>
    </div>
)

谁能帮我设置一个模式？我试图在单击 onShowMoreClick 后设置一个模态，这会将子项（创建、通信和实施组织...）变成一个模态。到目前为止它看起来像这样：

Answer 1

您需要在调用 OneProfileKeyCard 子组件的父组件中有一个 state-managed。

像这样

const Parent = () => {
    const [modalOpen, setModalOpen] = React.useState(false)

return (
   <div>
       <h1>Demo</h1>
        <OneProfileKeyCard
            title="Qualification"
            showMoreText="See all qualifications"
            onShowMoreClick={() => setModalOpen(!modalOpen)}>
                text ... text
        </OneProfileKeyCard>
   </div>
   )
}

我不确定你的组件中还有什么，但你需要一种关闭模型的方法，现在我已经将 showMoreClick 属性设置为 open/close，但如果它应该打开然后将其设置为 true 并为结束 false 函数执行类似的 pass-through。

单击 onShowMoreClick 后如何显示模式？

How to show a Modal once onShowMoreClick is clicked?

javascript

reactjs