父子组件通信主要用到props，如下

属性传值

父组件传出

render() {
        return(
            <Fragment>
                <input value={this.state.inputValue} onChange={this.inptChange.bind(this)}/>
                <button onClick={this.addList.bind(this)}>增加服务</button>
                <ul>
                    {
                        this.state.list.map((item,index)=>{
                            return (
                                    <XiaojiejieItem
                                        key={index+item}
                                        content={item}
                                        index={index}
                                    />
                            )
                        })
                    }
                </ul>
            </Fragment>
        )
    }

contnet和index就是属性

									<XiaojiejieItem
                                        key={index+item}
                                        content={item}
                                        index={index}
                                    />

子组件接收

render() {
        return (
            <li>{this.props.content}</li>
        );
    }

this.props.content就是接收从父组件传过来的content的值

子组件更改父组件里的值

由于React不允许直接从子组件干预父组件的值，那么可以在父组件用方法来接收值(子组件往父组件的方法传值)

首先在父组件增加一个方法

deleteItem(index){
        let list =this.state.list;
        list.splice(index,1);
        this.setState({
            list:list
        })
    }

在属性中使用方法

									< XiaojiejieItem
                                        key={index+item}
                                        content={item}
                                        index={index}
                                        deleteItem={this.deleteItem.bind(this)}
                                    />

子组件调用方法

	render() {
        return (
            <li onClick={this.handleClick}>{this.props.content}</li>
        );
    }
    handleClick(){
        this.props.deleteItem(this.props.index)
    }

END 完成子组件干预父组件的值

完整代码

父组件Xiaojiejie.js

import React,{Component,Fragment} from "react";
import XiaojiejieItem from "./XiaojiejieItem";
class Xiaojiejie extends Component{
    constructor(props){
        super(props);
        this.state= {
            inputValue: 'yomigi',
            list: ['基础按摩','精油推背']
        }
    }
    render() {
        return(
            <Fragment>
                <input value={this.state.inputValue} onChange={this.inptChange.bind(this)}/>
                <button onClick={this.addList.bind(this)}>增加服务</button>
                <ul>
                    {
                        this.state.list.map((item,index)=>{
                            return (
                                    <XiaojiejieItem
                                        key={index+item}
                                        content={item}
                                        index={index}
                                        deleteItem={this.deleteItem.bind(this)}
                                    />
                            )
                        })
                    }
                </ul>
            </Fragment>
        )
    }
    inptChange(e){
        this.setState({
            inputValue:e.target.value
        })
    }
    //增加列表
    addList(){
        if (this.state.inputValue.length>0){
            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 Xiaojiejie;

子组件XiaojiejieItem.js

import React, {Component} from 'react';
class XiaojiejieItem extends Component {
    constructor(props) {
        super(props);
        this.handleClick=this.handleClick.bind(this)
    }
    render() {
        return (
            <li onClick={this.handleClick}>{this.props.content}</li>
        );
    }
    handleClick(){
        this.props.deleteItem(this.props.index)
    }
}
export default XiaojiejieItem;