如何在 React 中将子组件状态传递给父组件状态答案

【问题标题】：How to pass a Child component state to Parent Component state in React如何在 React 中将子组件状态传递给父组件状态
【发布时间】：2020-07-04 13:22:45
【问题描述】：

我正在做一个 React 项目，在我的项目中，我有两个组件 Studentslist 和 Card。

在学生列表组件中，我有两个按钮，一个是曲棍球，另一个是板球。

现在当我点击 Cricket 按钮时，只有 Card 组件会显示我已经编写了类似的逻辑

那个。这里的 Card 组件是 Child to Studentslist 组件。在那个 Card 组件中，我有两个

提交和取消按钮。在这里，当我单击 Card 组件上的取消按钮时，

卡片组件必须隐藏，但它不起作用。我想我必须像这样写逻辑我有

要在 Card 组件中编写一个函数，我必须将该函数传递给 Studentlist

组件和该函数必须更新学生列表组件的状态。

请帮我解决这个问题

如果您觉得我的疑问不清楚，请发表评论。

这是 Studentlist.js

import React, { useState } from 'react';
import './Studentslist.css';
import Card from '../../Components/Card/Card';

function Studentslist() {
    const [show, setShow] = useState(false);
    return (
        <div className='container'>
            <div className='row'>
                <div className='col-12'>
                    <div className='Departments'>
                        <button className='btn btn-primary'>Hockey</button>
                        <button onClick={() => setShow(true)} className='btn btn-primary ml-2'>Cricket</button>
                    </div>
                    {show && <Card></Card>}
                </div>
            </div>
        </div>
    )
}

export default Studentslist

这是 Card.js

import React, { useState } from 'react';
import './Card.css';

function Card() {

    const [show, hide] = useState(true)
    return (
        <div className='container'>
            <div className='row justify-content-center'>
                <div className='col-6'>
                    <div className='Registration'>
                        <form>
                            <div className="form-group">
                                <label htmlFor="firstname">Firstname</label>
                                <input type="text" className="form-control" id="firstname"></input>
                            </div>
                            <div className="form-group">
                                <label htmlFor="lastname">Lastname</label>
                                <input type="text" className="form-control" id="lastname"></input>
                            </div>
                            <div className="form-group">
                                <label  htmlFor="email">Email</label>
                                <input type="email" className="form-control" id="email"></input>
                            </div>
                            <div className="form-group">
                                <label htmlFor="password">Password</label>
                                <input type="password" className="form-control" id="password"></input>
                            </div>
                            <button type="submit" className="btn btn-primary">Submit</button>
                            <button  type="button" onClick={() => hide(false)} className='cancel btn btn-danger ml-2'>Cancel</button>
                        </form>
                    </div>
                </div>
            </div>
        </div>
    )
}

export default Card

【问题讨论】：

标签： reactjs

【解决方案1】：

你不能将children状态传递给parent，你可以将setShow作为props传递给cardComponent

{show && <Card setShow={() => setShow(false)}></Card>}

在 cardComponent 中你可以像下面这样使用

function Card({ setShow }) {
...
<button  type="button" onClick={setShow} className='cancel btn btn-danger ml-2'>Cancel</button>

【讨论】：