javascript - 如果我有一个按钮触发 React 中第二个子项中的状态，如何将状态传递给父组件

Question

您好，
我最近遇到的问题是下一个:
我有一个父组件 MainPage ，具有子组件 ModalJoin (默认不显示)和ExploreProjects在里面。这个ExploreProjects组件有自己的子组件ProjectCard它有一个按钮应该改变状态所以ModalJoin显示。
有没有人有我如何绑定(bind)所有这些的解决方案，所以当单击按钮时 ->useState 更改为 真实 和 ModalJoin弹出？一整天都在尝试正确链接它们，但仍然没有找到解决方案。
将不胜感激任何帮助!
有以下文件:
主页

import React, {useState} from 'react'



import ExploreProjects from './ExploreProjects'
import ModalJoin from './ModalJoin'

export default function MainPage() {
    const [isOpened, setIsOpened] = useState(false)





    return (
        <div>
            
            <div className='app'>
                <div className="app__body">
                    
                    <ExploreProjects/>
                </div>
                
            </div>

            <ModalJoin openModal={isOpened} onClose={() => setIsOpened(false)}/>
        </div>
    )
}

探索项目

import React from 'react'
import './ExploreProjects.css'
import ProjectCard from './ProjectCard'

function ExploreProjects() {
    return (
        <div className='explore__projects'>

            <div className="filters__section">
                <div className='filter__item'>
                    <h3>Location</h3>
                    <img src="/images/chevronDown.svg" alt=""/>
                </div>
                <div className='filter__item'>
                    <h3>Industry</h3>
                    <img src="/images/chevronDown.svg" alt=""/>
                </div>
                <div className='filter__item'>
                    <h3>Company</h3>
                    <img src="/images/chevronDown.svg" alt=""/>
                </div>
                <div className='filter__item'>
                    <h3>Complexity</h3>
                    <img src="/images/chevronDown.svg" alt=""/>
                </div>
                <div className='filter__item'>
                    <h3>Duration</h3>
                    <img src="/images/chevronDown.svg" alt=""/>
                </div>

            </div>
            <div className="projects__section">
            <ProjectCard />
            <ProjectCard />
            <ProjectCard />
            <ProjectCard />
            <ProjectCard />
            <ProjectCard />
            </div>


        </div>
    )
}

export default ExploreProjects

项目卡

import React, {useState} from 'react'
import './ProjectCard.scss'

export default function ProjectCard({ src, logo, headline, companyName,
    complexity, description, projectType, tag }) {
const [setIsOpened] = useState(false)

    return (
        <div className='project__card'>
            <div className="project__card__header">
                <img src="/images/rehauIcon.png" alt="" className='company__logo' />

                <h3>Logistics Project</h3>
                <div className="project__card__company">
                    <img src="/images/buildingIcon.svg" alt="" />
                    <p>Rehau</p>
                    <p>/</p>
                    
                    <img src="/images/locationIcon.svg" alt="" />
                    <p>Berlin</p>

                    
                </div>

                <div className="project__card__complexity">
                    <div className="basic__complexity"></div>
                        <p>Basic</p>
                </div>


            </div>

            <div className="project__card__body">
                <div>
                    <h3>Task:</h3>
                    

                </div>


                <span>Text

                    <button>More</button>
                </span>
            </div>
            <div className="project__card__bottom">
                <div className="project__card__time">
                    <p>15m ago</p>
                </div>
                <div className="project__card__recruitment">
                    <p>Job opportunity</p>
                </div>
                <div className="project__card__teams">
                    <p>1/2 teams joined</p>
                </div>
                <div className="project__card__tag">
                    <p>#supplychain</p>
                </div>



            </div>
            <div className="project__card__right">

                <img src="images/imgHero.png" alt="" className='project__video__info' />
                <div onClick={ () => this.setIsOpened(true)} className="join__project__button">
                    <p>Join</p>
                </div>

            </div>

        </div>
    )
}

模态加入

import React from 'react'


export default function ModalJoin({openModal, onClose}) {
    if (!openModal) return null
    return (
        <div>
            <button onClick={onClose}>Close</button>
            HEEEYYYYYY
        </div>
    )
}

Answer 1

我评论说:

You'll need to pass a callback prop down <ExploreProjects onOpenModalJoin={callback} />, and then pass the same callback down from ExploreProjects down to ProjectCard. Then in project card on the button click, you would call that callback.

这是一个更完整的解释:

export default function MainPage() {
    const [isOpened, setIsOpened] = useState(false);
    const callback = () => setIsOpened(true);
    ...
    <ExploreProjects onOpenModalJoin={callback} />

function ExploreProjects(props) {
    ...
    <ProjectCard onOpenModalJoin={props.onOpenModalJoin} />
    ...

然后在 ProjectCard 中，您将拥有

   onClick={props.onOpenModalJoin}