react的通信在详细讲解

父组件

import React,{ Component } from 'react'
import Son from './son.js'
export default class Shoukongzujian extends Component{
    constructor(props){
        super(props)
        this.state={
            arr:'12',
            arrs: [
                { id: 1, name: "废水"},
                { id: 2, name: "土壤" },
                { id: 3, name: "大气"},
            ],
            fathers: "我是父亲传过来的数据",
            number: 1,
            num: 0,
            title: "文本1"
        }
        this.tiji=this.tiji.bind(this)
        this.HelloDiv=React.createRef();
    }
    bandleSubmit=(e)=>{
        // 阻止默认行为
        e.preventDefault();
    }
    sub = (event)=>{
        const {arr}=this.state
        this.setState({
            arr: event.target.value
        },()=>console.log("-----arr----",arr))    
    }
    tiji(event){
        const {arr}=this.state
        this.setState({
            arr: event.target.value
        },()=>console.log("-----arr----",arr))
    }
    upinput = ()=>{
        console.log(this.state.arr, "------statearr----");
    }
    componentDidMount(){
        //  this.HelloDiv.current这个是获取它的元素
        this.HelloDiv.current.style.color="red"
        this.refs.divDemo.style.color="blue"
        console.log(this.state.arrs,'arrs');
    }
    par(na){
        this.setState({
            number: na
        })
    }
    // Uncaught TypeError: Cannot read property 'state' of undefined 没有使用箭头函数
    changexiugai(){
        /*
            Line 52:17:  'num' is assigned a value but never used  no-unused-var
            const { num } = this.state.num 这种是错误的
        */ 
        let { num } = this.state
        console.log("------num----", num);
        this.setState({
            num: num+10,
        })
    }
        chang=()=>{
        this.setState({
            title: "文本2"
        })
    }
    // shouldComponentUpdate判断是否更新dom state中属性的值
    shouldComponentUpdate(){
        console.log("------shouldComponentUpdate------");
        return true
    }
    render(){
        return(
            <div>
                <form onSubmit={this.bandleSubmit}>
                    <input type="text" style={{margin: "200px 0px 0px 0px"}} 
                    value={this.state.arr} onChange={this.sub}/><br/><br/>
                    <input type="password" ref={this.password}/><br/><br/>
                    <button ref={this.HelloDiv} onClick={this.upinput}>提交</button>
                    {/* 第二种方式获取 */}
                    <div ref="divDemo">ref的第二种写法</div>
                    {/* 
                        index.js:1 ./src/components/dis/dis.js
    Line 54:33:  Expected an assignment or function call and instead saw an expression 
    no-unused-expressions
    Search for the keywords to learn more about each error.     
                       {
                            this.state.arrs.map((item,index)=>{
                                <div key={item.id}>
                                    <li>{item.name}</li>
                                </div>
                            }                               
                        )
                        } 
                        要去掉花括号 

                    */}
                        {
                            this.state.arrs.map((item,index)=>(
                                <div key={item.id}>
                                    <li>{item.name}</li>
                                </div>
                            )                             
                        )
                    }
                </form>
                <h1>{this.state.number}</h1>
                {/* 子传父,是通过传在调用子组件中传自定义方法,在子组件中使用它传来的方法,把参数传过去,
                进行通信 */}
                <Son title={this.state.fathers} zdifa={this.par.bind(this)}
                 clickChanges={this.chang} ></Son>
                <p>{this.state.num}</p>
                <button onClick={ this.changexiugai.bind(this)}>点击修改</button>
                <p>{this.state.title}</p>
            </div>
        )
    }
}
// 数据比较多的时候使用非受控组件
/*
   refs使用的场景
   1.管理焦点,文本选择和媒体播发
   2.触发强制动画
   3.集成第三方DOM库
*/

子组件

import React,{ Component } from 'react'
export default class Son extends Component{
    constructor(props){
        super(props)
        this.state={
            des:'子元素传过来的数据',
            des1:'再次点击数据发生改变'

        }
    }
    ann = () =>{    
        this.props.zdifa(this.state.des)
    } 
    clickChange= ()=>{
        this.props.clickChanges()
    }
    render(){
        return (
            <div>
                我是子组件
                <li style={{listStyle:"none"}}>{this.props.title}</li>
                <button onClick={this.ann}>点击按钮</button>
                {/* 
                    在子组件中调用父组件自定义的方法
                    <button onClick={()=>{this.props.zdifa(this.state.des)}}>点击按钮在次改变数据</button>
                */}
                {/* 
                    通过儿子的事件,触发函数的执行
                */}
                  <button onClick={()=>{this.props.zdifa(this.state.des1)}}>再次点击</button>
                <button onClick={ this.clickChange }>修改title</button>
            </div>
        )
    }
}