React父子通信（受控组件）

一、子组件传父组件

新建组件Childtheparent.js写入：

import React, { Component } from 'react'

class Navbar extends Component {
  render() {
    return (
      <div style={{background: "red"}}>
          <button onClick={() => {
            //   console.log(this.props.event)
              this.props.event()
          }}>click</button>
          <span>navbar</span>
      </div>
    )
  }
}

class Sidebar extends Component {
    render() {
      return (
        <div style={{background: "green", width: "100px"}}>
            <ul>
                <li>1111</li>
                <li>1111</li>
                <li>1111</li>
                <li>1111</li>
                <li>1111</li>
            </ul>
        </div>
      )
    }
  }

export default class Childtheparent extends Component {
  state = {
      isShow: false
  }  
  eventHandle = () => {
      console.log('父组件定义函数')
      this.setState({
          isShow: !this.state.isShow
      })
  }
  render() {
    return (
      <div>
          <Navbar event={this.eventHandle}></Navbar>
          {this.state.isShow && <Sidebar></Sidebar>}
      </div>
    )
  }
}

可以看到子传父的话，子组件接收一个父组件传进来的回调函数，点击时执行即可。
效果：

---

二、选项卡案例应用（受控组件）

在我的这篇选项卡案例博客中进行修改。
新建一个TabLi.js将选项卡列表写到这个组件中：

import React, { Component } from 'react'

export default class TabLi extends Component {
    state = {
        list: [
            {
                id: 1,
                name: '电影'
            },
            {
                id: 2,
                name: '影院'
            },
            {
                id: 3,
                name: '我的'
            }
        ],
        lIndex: 0
    }
  render() {
    return (
      <div>
          <ul>
              {
                this.state.list.map((item, index) => 
                    <li onClick={() => {
                        this.indexHandle(index)
                    }} className={this.state.lIndex === index ? 'active' : ''} key={item.id}>{item.name}</li>
                )
              }
          </ul>
      </div>
    )
  }
  indexHandle(index) {
    this.setState({
        lIndex: index
    })
    this.props.event(index)
    // 该通知父组件修改lIndex
}
}

可以看到Tab.js组件中引入这个组件了，并且传递了一个回调函数到子组件，让子组件更改父组件的lIndex让父组件正确的显示那个组件。

接下来我们新建一个Headerbar.js组件：

import React, { Component } from 'react'

export default class Headerbar extends Component {
  render() {
    return (
      <div style={{background: "yellow", textAlign: "center", overflow: "hidden"}}>
        <button style={{float: "left"}}>back</button>
        <span>卖座电影</span>  
        <button style={{float: "right"}} onClick={() => {
          console.log(this.props.event)
          this.props.event()
        }}>center</button>
      </div>
    )
  }
}

可以看到点击center按钮触发了父组件的回调函数，父组件的回调函数就是将组件切换到我的组件：

但是底部子组件却有自己的状态不跟着父组件的状态，所以高亮显示不过去，那我们怎么让这个子组件不要有自己的状态，形成一个受控组件，跟随父组件的状态呢，将TabLi.js写成函数式组件：

// import React, { Component } from 'react'
import React from 'react'

export default function TabLi(props) {

    // function indexHandle(index){
    //     props.event(index)
    //     // 该通知父组件修改lIndex
    // }
    
  return (
    <div>
          <ul>
              {
                props.list.map((item, index) => 
                    <li onClick={() => props.event(index)} className={props.lIndex === index ? 'active' : ''} key={item.id}>{item.name}</li>
                )
              }
          </ul>
      </div>
  )

}


// export default class TabLi extends Component {
//   render() {
//     return (
//       <div>
//           <ul>
//               {
//                 this.props.list.map((item, index) => 
//                     <li onClick={() => {
//                         this.indexHandle(index)
//                     }} className={this.props.lIndex === index ? 'active' : ''} key={item.id}>{item.name}</li>
//                 )
//               }
//           </ul>
//       </div>
//     )
//   }
//   indexHandle(index) {
//     this.props.event(index)
//     // 该通知父组件修改lIndex
// }
// }

受控组件不要有自己的状态，全部通过父组件传过来的状态：

效果：

可以看到我们点击center按钮也跳到了我的组件，并且底部也高亮。

在学习React的路上，如果你觉得本文对你有所帮助的话，那就请关注点赞评论三连吧，谢谢，你的肯定是我写博的另一个支持。