时间戳

首页 > 解决方案 > 如果我有一个按钮触发 React 中第二个子项中的状态，如何将状态传递给父组件

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

问题描述

你好呀，

我最近遇到的问题是下一个：

我有一个父组件MainPage，其中包含子组件ModalJoin（默认情况下不显示） ExploreProjects 。这个ExploreProjects组件有它自己的子组件ProjectCard，它有一个按钮，应该改变状态，所以ModalJoin如图所示。有没有人有我如何绑定所有这些的解决方案，所以当单击按钮时 - > useState 更改为true并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>
    )
}

标签： javascriptreactjs

解决方案

我评论说：

您需要向下传递回调道具<ExploreProjects onOpenModalJoin={callback} />，然后将相同的回调从 ExploreProjects 向下传递到 ProjectCard。然后在按钮单击的项目卡中，您将调用该回调。

这是一个更完整的解释：

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}

推荐阅读