React类式组件父传子、子传父、ref的通信

朴灿烈づ我的快乐病毒、 2023-07-22 09:24 21阅读 0赞

###### React父子组件之间的通信 ######

React中：
    1.父传子 --> 传递数据，属性   
    2.子传父 --> 传递方法，回调函数的调用
    3.ref标记，父组件拿到子组件的引用，就可以调用子组件的方法
    
    Vue中：
    1.父传子 --> 属性  
    2.子传父 ---> 事件

###### ref与父传子、子传父的区别 ######

输入框的value值拿到之后，还要把value值通过回调函数调用传回给外面的事件(父组件)，如果父组件想要清空输入框的话，就从父组件中传一个新的
    属性进来，进行重置，这样就不用与input标签进行交互，只要身上绑定一个ref，我就能拿到这个组件的任何东西，我能拿到他的状态，我就可以获取它里面
    孩子的状态，同样的话，我还可以去修改他的状态。

`1.React-父传子`

import React, {  Component } from 'react'
    
    class Navbar extends Component{ 
        render(){ 
            return <div>
                <button>返回</button>
                { /* vue中的props功能一样 */}
                {  this.props.mytitle }
                {  this.props.myshow ? <button>首页</button> : null }
            </div>
        }
    }
    
    export default class App extends Component { 
        render() { 
            return (
                <div>
                    { /* myshow传的是Boolean值 */}
                    <Navbar mytitle="首页" myshow={ false}></Navbar>
                    <Navbar mytitle="列表" myshow={ true}></Navbar>
                    <Navbar mytitle="购物车" myshow={ true}></Navbar>
                </div>
            )
        }
    }

`2.React-子传父`

import React, {  Component } from 'react'
    
    class Navbar extends Component{ 
        render(){ 
            return <div style={ { background:"red"}}>
                { /* 3.拿到handleClick这个事件 */}
                navbar<button onClick={ this.handleClick}>点击</button>
            </div>
        }
    
        // 2.触发onKerwinEvent事件
        handleClick = ()=>{  this.props.onKerwinEvent() } 
        // 4.子组件中访问到isShow这个属性，()执行onKerwinEvent这个回调函数函数，这个回调函数封装在APP组件中
    }
    
    class Sidebar extends Component{ 
        render(){ 
            return <div style={ { background:"yellow"}}>
                Sidebar
                <ul>
                    <li>11111</li>
                    <li>222222</li>
                    <li>33333</li>
                </ul>
            </div>
        }
    }
    
    export default class App extends Component { 
        state = { 
            isShow:true
        }
        render() { 
            return (
                <div>
                    { /* 1.监听自定义事件 */}
                    <Navbar onKerwinEvent={ ()=>{  // App 组件的回调函数
                        { /* 5.调用setState方法，修改状态 */}
                        this.setState({ 
                            isShow: !this.state.isShow
                        })
                    }}/>
                    {  this.state.isShow ? <Sidebar/> : null }
                    { /* 相当于： <button onClick={()=>{ this.setState({ isShow:!this.state.isShow }) }}>click</button> */}
                </div>
            )
        }
    }

`3.React-ref通信`

// todolist
    
    import React, {  Component } from 'react'
    
    class Input extends Component{ 
      // 5.定义状态
        state = { 
            mytext:"",
            list: ['111', '222', '333']
        }
    
    	// 10.定义kerwinreset方法，用来清空输入框的value值
        kerwinreset= ()=>{ 
            this.setState({ 
                list: [...this.state.list, this.state.mytext],
                mytext:""
            })
        }
    
        handleDel = (index) => { 
          var newList = [...this.state.list]
          newList.splice(index, 1)
          console.log(newList)
          this.setState({ 
            list: newList
          })
        }
    
        render(){ 
            return (
              <div>
                  { /* 1.创建组件 */}
                  { /* 7.绑定onChange事件 */}
                  <input type="text" style={ { background:"yellow"}}
                      value={ this.state.mytext} onChange={ (e)=>{ 
                      this.setState({ 
                          // 8.一点击button按钮就把输入框当前的value同步给mytext状态
                          mytext:e.target.value
                      })
                  }}/>
                  <ul style={ {  listStyle: "none" }}>
                    {  this.state.list.map((item, index) => 
                        <li key={ item}>
                          {  item }
                          <button onClick= {  this.handleDel.bind(this, index) }>删除</button>
                        </li> 
                    ) }
                  </ul>
              </div>
            )
        }
    }
    
    export default class App extends Component { 
        state = { 
          datalist: []
        }
    
        render() { 
            return (
                <div>
                    { /* 2.使用组件，通过ref拿到value值 */}
                    <Input ref="myinput"/>
                    { /* 3.绑定点击事件 */}
                    <button onClick={ this.handleClick}>添加</button>
                </div>
            )
        }
        // 4.点击事件
        handleClick = ()=>{ 
            // 6.拿到input的结构(状态和方法都能拿到)
            console.log(this.refs.myinput)
            // 9.拿到拿到输入框的value值
            console.log(this.refs.myinput.state.mytext)
            // 11.拿到输入框的value之后，调用kerwinreset方法，来清空输入框
            this.refs.myinput.kerwinreset()
        }
    }