Question

我正在做一个React项目，在我的项目中，我有两个部分Studentlist和Card。

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

现在，当我单击“板球”按钮时，只有卡组件会显示我已编写了类似

的逻辑

那。在此，“卡片”组件是“子级到学生列表”组件。在该卡片组件中，我有两个

按钮，它们被提交和取消。在这里，当我单击“卡片”组件上的“取消”按钮时，

卡组件必须隐藏，但无法正常工作。我想我必须像这样写逻辑

要在Card组件中编写一个功能，我必须将该功能传递给Studentslist

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

请帮助我解决这个问题

如果您不确定我是否有疑问，请发表评论。

这是Studentslist.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

Answer 1

您不能将孩子的状态传递给父母，可以将setShow传递给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>

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

1 个答案: