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

Dear 丶 2022-03-17 13:07 208阅读 0赞

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

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

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2ppYW9qc3Vu_size_16_color_FFFFFF_t_70][]

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

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2ppYW9qc3Vu_size_16_color_FFFFFF_t_70 1][]

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

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2ppYW9qc3Vu_size_16_color_FFFFFF_t_70 2][]

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

<!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>

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2ppYW9qc3Vu_size_16_color_FFFFFF_t_70]: /images/20220317/b31db7012e5c442b9ffa4a860b9b8dee.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2ppYW9qc3Vu_size_16_color_FFFFFF_t_70 1]: /images/20220317/15ff9f4c6dac4f98bcf7d982f35d511d.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2ppYW9qc3Vu_size_16_color_FFFFFF_t_70 2]: /images/20220317/fafff1c3edcc433e90ef8d716db42261.png