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

导读:本篇文章讲解 React类式组件父传子子传父ref的通信,希望对大家有帮助,欢迎收藏,转发!站点地址:www.bmabk.com

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()
    }
}

版权声明:本文内容由互联网用户自发贡献,该文观点仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 举报,一经查实,本站将立刻删除。

文章由极客之音整理,本文链接:https://www.bmabk.com/index.php/post/4573.html

(0)
小半的头像小半

相关推荐

极客之音——专业性很强的中文编程技术网站,欢迎收藏到浏览器,订阅我们!