P13: * Component组件拆分、子组件向父组件传递数据

import React, { Component } from 'react'; //imrc
class BeautyItem  extends Component { //cc

    render() { 
        return ( 
            美女
         );
    }
}
export default BeautyItem;

import BeautyItem from "./BeautyItem";

{/*
{__html:item}}


*/ }

，为的是防止两个以上的标签，产生错误信息。

最后直接写入 Beauty 标签就可以了。

已经把 ”美女” 组件做了一个基本的拆分，但是还不能实现随着输入，显示出输入的内容。

这里涉及的是父组件向子组件传值。

然后点击删除，就相当于子组件向父组件传值。

父组件向子组件传值

这里只介绍最实用的，最快速的上手方法。

就是使用组件属性的形式父组件给子组件传值。

比如： 我们在 组件中加入 content 属性，然后给属性传递 {item}，这样就完成了父组件向子组件传值。

现在值已经顺利的传递了过去，这时候可以通过 this.props.xxx 的形式进行接受，比如传递过来的值，可以用如下代码进行接收。

import React, { Component } from 'react'; //imrc
class BeautyItem  extends Component { //cc

    render() { 
        return ( 
            {this.props.content}
         );
    }
}

export default BeautyItem;

修改完美女子项的组件后，可以打开浏览器进行预览了。

试着添加几个新的选项试一下，比如美女踩背。

玩笑归玩笑，学到这里你要记住一点： 父组件向子组件传递内容，靠属性的形式传递。

子组件向父组件传递数据

现在要作这样一个功能：

点击组件中的菜单项后，删除该菜单项。 在前边的教程中已经学习了这个知识，只是现在组件拆分了，就涉及了一个子组件向父组件传递数据的知识需要掌握。

先来绑定点击事件，这时候当然是要在 BeautyItem 组件中绑定了。

代码如下：

import React, { Component } from 'react'; //imrc
class BeautyItem  extends Component { //cc

    render() { 
        return ( 
            {this.props.content}
         );
    }

    handleClick(){
        console.log('撩拨了小姐姐')
    }

}

export default BeautyItem;

warning警告

这时候进行预览，打开F12，再点击服务菜单项，就会再console里显示出 ”撩拨了小姐姐”的字样。但是console里还有一个warning警告，这个警告我们见过， 就是要求循环时必须设置key值。

修改 Beauty 组件的 render 代码如下：

    {
        this.state.list.map((item,index)=>{
            return (
                
            )
        })
    }

绑定成功后，现在就要通过操作子组件删除父组件里的数据了。

但是React有明确规定，子组件时不能操作父组件里的数据的，所以需要借助一个父组件的方法，来修改父组件的内容。

其实在以前已经写了一个删除方法 deleteItem，现在要作的就是子组件调用这个方法。

//删除单项服务
deleteItem(index){
    let list = this.state.list
    list.splice(index,1)
    this.setState({
        list:list
    })
}

获取数组索引下标

那现在问题来了，要删除就要知道索引值，还是需要通过父组件传递给子组件。 这里还是通过 props 属性的形式进行传递。

    {
        this.state.list.map((item,index)=>{
            return (
                
            )
        })
    }

然后修改 BeautyItem 组件，在 handleClick方法里，写入下面代码：

handleClick(){
    console.log(this.props.index)
}

这时候预览一下，你会发现点击列表执行删除方法后报错，错误还是我们的老朋友没有 bind(this)。

那可以用以前的老方法绑定 this。

return ( 
    
        {this.props.content}
    
);

这样是可以解决的，但是肯定会有小伙伴说，我看别人不是这样写的，而是在构造函数里绑定的。（有言曰：构造函数中绑定性能会高一些，特别是在高级组件开发中，会有很大的作用）

constructor 绑定 this 方法。

import React, { Component } from 'react'; //imrc
class BeautyItem extends Component { //cc
   //--------------主要代码--------start
   constructor(props){
       super(props)
       this.handleClick=this.handleClick.bind(this)
   }
   //--------------主要代码--------end
    render() { 
        return ( 
            
                {this.props.content}
            
        );
    }
    handleClick(){
        console.log(this.props.index)
    }
}

export default BeautyItem;

子组件调用父组件方法

如果子组件要调用父组件方法，其实和传递数据差不多，只要在组件调用时，把方法传递给子组件就可以了，记得这里也要进行 this 的绑定，如果不绑定子组件是没办法找到这个父组件的方法的。

    {
        this.state.list.map((item,index)=>{
            return (
                
            )
        })
    }

传递后，在 BeautyItem 组件里直接用就可以了，代码如下：

handleClick(){
    this.props.deleteItem(this.props.index)
}

到此为止，就算是实现了子组件向父组件传值。

特别提醒： 本文内容是React体系中非常重要的一节，小伙伴们可以多看几遍，并进行练习。因为真正的React开发工作，每天写的就是各种组件，传值是组件之间产生联系的必要一环，无法跳跃。所以一定要学好。

预览最终效果

index.js

Xiaojiejie.js（未用）

这个没用上

BeautyItem.js

子组件

import React, { Component } from 'react'; //imrc
class BeautyItem extends Component { //cc
   //--------------主要代码--------start
   constructor(props){
       super(props)
       this.handleClick=this.handleClick.bind(this)
   }
   //--------------主要代码--------end
    render() { 
        return ( 
            {__html:this.props.content}}
            
        );
    }
    handleClick(){
        console.log(this.props.index)
        this.props.deleteItem(this.props.index)
    }
}

export default BeautyItem;

Beauty.js

父组件

import React,{Component,Fragment } from 'react'
import BeautyItem from './BeautyItem'

class Beauty extends Component{
//js的构造函数，由于其他任何函数执行
constructor(props){
    super(props) //调用父类的构造函数，固定写法
    this.state={
        inputValue:'' , // input中的值
        list:['基础按摩','精油推背']    //服务列表
    }
}

render(){
    return  (
        
            {/* 正确注释的写法 */}
            
                加入服务：
                
                 增加服务 
            
            
                {
                    this.state.list.map((item,index)=>{
                        return (
                            
                        )
                    })
                }
            
        
    )
}

    inputChange(e){
        // console.log(e.target.value);
        // this.state.inputValue=e.target.value;
        this.setState({
            inputValue:e.target.value
        })
    }
    //增加服务的按钮响应方法
    addList(){
        this.setState({
            list:[...this.state.list,this.state.inputValue],
            inputValue:''
        })

    }
   //删除单项服务
   deleteItem(index){
    let list = this.state.list
    list.splice(index,1)
    this.setState({
        list:list
    })
}

}
export default Beauty