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的方式更爲簡單