react-----子组件使用父组件的方法,然后改变父组件的状态

很多时候,正在进行react父子通信的时候,应该是将父子组件的纯洁度保持上去,子组件不能在本身去修改父组件的方法,而是应该使用父组件自己的方法去修改本身的状态。
那么这里会遇到一个问题,就是当需要传递参数的时候,比如某一个激活项。

(1)使用bind改变this的方式
在父组件中:

constructor(props){
        super()
        this.state={
            activeTab:'0',//默认的激活项tab
        }
        this.handleClickTab = this.handleClickTab.bind(this)
    }
handleClickTab(data){
       const {activeTab} = this.state
       if(data == activeTab) return
       this.setState({
           activeTab:data
       })
 }
  render(){
      const {pathKey,tabsTitlte,tabsTitlte2,activeTab} = this.state
      return (
          <div>
             <Tabscm tabs={tabsTitlte} active={activeTab} handleClick={this.handleClickTab} />
          </div>
      )
  }

子组件

import React from 'react'
import styles from './index.less'


const Tabscm=(props)=>{
    const {tabs,handleClick,active} = props
    return(
        <div className='tabsbox'>{tabs.map((item,i)=>{
            return (<span key={i} className={`tabsbox-item ${i==active?'active':''}`} 
            		onClick={()=>{handleClick(i)}}>{item.title}</span>)
        })}</div>
    )
}

export default Tabscm;

(1)使用匿名函数的方式
父组件

    handleClickTab=(data)=>{
        const {activeTab} = this.state
        if(data == activeTab) return
        this.setState({
            activeTab:data
        })
    }
    render(){
        const {pathKey,tabsTitlte,tabsTitlte2,activeTab} = this.state
        return (
            <div>
            		<Tabscm tabs={tabsTitlte} active={activeTab} handleClick={(data)=>{
                        this.handleClickTab(data)
                    }} />
            </div>
        )
    }

在使用匿名函数的时候,参数需要从外层的匿名函数到里层的匿名函数。不然娶不到在子组件中传给父组件的参数
总结:使用bind改变this的方式更为简单

發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章