react进阶—03子级向父级传递数据

最新推荐文章于 2024-06-05 21:56:54 发布

jiaojsun

最新推荐文章于 2024-06-05 21:56:54 发布

阅读量671

点赞数

CC 4.0 BY-SA版权

分类专栏： react进阶

本文链接：https://blog.youkuaiyun.com/jiaojsun/article/details/87905237

react进阶专栏收录该内容

5 篇文章

订阅专栏

本文详细介绍了在React中，子组件如何通过props将变化的状态传递给父组件，包括事件处理和状态更新的具体实现方式。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

这一节主要讲解如何把子级发生变化的show，传递给父组件。

首先，在子组件Item中的changeList事件中，添加这样的代码

注意，this.props.onChange(this.props.index);指的是调用父级传过来的事件，这个附件在父级是这样定义的

这样呢，子级向父级传值已经实现，但是并没有实现我们的效果，我们分别在父组件和子组件中打印值。父组件没有问题，子组件却又问题。如下所示

这是为什么呢，请接着查看下一节。本节具体代码如下所示

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<title>My React!</title>
<script src="https://cdn.staticfile.org/react/16.4.0/umd/react.development.js"></script>
<script src="https://cdn.staticfile.org/react-dom/16.4.0/umd/react-dom.development.js"></script>
<script src="https://cdn.staticfile.org/babel-standalone/6.26.0/babel.min.js"></script>
<script src="./data.js"></script>
<style>
    .penel{
        border: 1px solid #000;
        width: 80%;
    }
    .title{
        margin:0;
        padding: 10px;
        background: #ccc;
    }
    p.vip{
        color:red;
    }
    p.message{
        color:#aaa;
    }
</style>

</head>
<body>

<div id="app"></div>
<script type="text/babel">
    class List extends React.Component{
        render(){
            return (<ul>
                {this.props.list.map(function(val,index){
                    return (
                        <li key={index}>
                            <p className="vip">{val.username}</p>
                            <p className="message">{val.message}</p>
                        </li>
                    )
                })}
            </ul>)

        }
    }

    class Item extends React.Component{
        constructor(){
            super(...arguments);
            this.state = {
                show:this.props.show
            }
        }
        changeList(){
            let show = !this.state.show;
            this.setState({
                show
            });
            if(show){
                console.log("操作其他列表隐藏")
                console.log(this.props.onChange);
                this.props.onChange(this.props.index);
            }
            /**
             * 1.隐藏当前，不需要改变其他
             * 2.展开当前，隐藏其他项的状态
             */
        }
        render(){
            console.log(this.state.show); //打印之后有问题
            return(<div>
                    <h2 className="title" onClick={this.changeList.bind(this)}>{this.props.data.name}</h2>
                    {this.state.show?<List list={this.props.data.list} />:""}
                </div>)
        }
    }

    class Penel extends React.Component {
        constructor(){
            super(...arguments);
            this.state = {
                showList:[true,false,false]
            }
            this.changeList = this.changeList.bind(this);
        }
        changeList(i){
            // 需要让当前的第几个显示
            console.log(i);
            let showList = this.state.showList.map(function(val,index){
                if(i == index){
                    return true;
                }
                return false;
            })
            this.setState({
                showList
            });
            console.log(this.state.showList); //打印没问题
        }
        setShow(){
            var list = Object.keys(dataList).map((val,index) => {
                return (<Item 
                            data={dataList[val]} 
                            key={index} 
                            show={this.state.showList[index]}
                            onChange={this.changeList}
                            index={index}
                            />
                        )
            });
            return list
        }
        render(){
            return (
                <div className="penel">
                    {this.setShow()}
                </div>
            );
        }
    }
    ReactDOM.render(
        <Penel />,
        document.getElementById('app')
    );
</script>

</body>
</html>