react的子组件向父组件传值

子传父:回调函数 this.props.event() ,父组件接受 event={this.handleEvent}
看如下案例:

示例图片

点击按钮控制左侧菜单的显示和隐藏

import React, { Component } from 'react'
import  './../01-base/css/01-index.css'
class Navbar extends Component {
    render() {
        return <div style={{ background: "red" }}>
            <button onClick={() => {
                this.props.event()
              }}>click</button>
                <ul className="topNav">
                    <li>Home</li>
                    <li>Home</li>
                    <li>Home</li>
                    <li>Home</li>
                    <li>Home</li>
                </ul>
            </div>
    }
}
class Sidebar extends Component {
    render() {
        return <div  className="leftNav">
                <ul>
                    <li>left</li>
                    <li>left</li>
                    <li>left</li>
                    <li>left</li>
                </ul>
            </div>
    }
}

export default class App extends Component {
    state = {
        IsShow: true,
    }
    handleEvent = () => {
        console.log("父组件定义的event事件")
        this.setState({IsShow: !this.state.IsShow})
    }
  render() {
    return (
        <div>
            <Navbar event={this.handleEvent} />
            {this.state.IsShow && <Sidebar />}
      </div>
    )
  }
}
/**
 * 子传父:回调函数 event
 */

下面接着看子组件通过this.props.事件名称 传值给父组件，父组件通过this.props.属性名 传值给子组件的例子
效果如下：
上面的navbar 和下面的tabbar分别是两个子组件，实现点击子组件，选项切换内部组件，点击center同时切换到center组件和高亮选择下班的tabbar的center选项

示例图片

父组件

import React, { Component } from 'react'
import './../01-base/css/01-index.css'
import Film from '../01-base/components/Film'
import Cinemas from '../01-base/components/Cinema-2'
import Center from '../01-base/components/Center'
import NavBar from './components/Navbar'
import TabBar from './components/Tabbar'
export default class app extends Component {
    state = {
        list: [
            {
                id: 1,
                text: "电影"
            },
            {
                id: 2,
                text: "影院"
            },
            {
                id: 3,
                text: "我的"
            }
        ],
        current: 0
    }
    which() {
        switch (this.state.current) {
            case 0: return <Film></Film>
            case 1: return <Cinemas></Cinemas>
            case 2: return <Center></Center>
            default: return null
        }
    }
    render() {
        return (
            <div>
                <NavBar myevent={() => {
                    console.log("center")
                    this.setState({
                        current: 2
                    })
                }} />
                {this.which()}
                <TabBar myevent={
                    (index) => {
                        this.setState({
                            current: index
                        })
                    }
                } current={this.state.current} list={this.state.list}></TabBar>
            </div>
        )
    }
}

子组件navbar

import React, { Component } from 'react'
import './../../01-base/css/01-index.css'
export default class Navbar extends Component {
    render() {
        return (
            <div className="navbar" style={{ background: "yellow" }}>
                <button>back</button>
                <span>卖座电影</span>
                <button onClick={() => {
                    this.props.myevent()
                }}>center</button>
            </div>
        )
    }
}

子组件 tabbar

import React, { Component } from 'react'
import './../../01-base/css/01-index.css'
export default class app extends Component {
    render() {
        return (
            <div>
                <ul className="tab">
                    {
                        this.props.list.map((item, index) =>
                            <li key={item.id} onClick={() => this.handleClick(index)} className={this.props.current === index ? 'active' : ''}>{item.text}</li>
                        )
                    }
                </ul>
                <div>
                </div>
            </div>
        )
    }
    handleClick = (index) => {
        this.props.myevent(index)
    }
}

子组件 tabbar的函数式写法

const TabBar = (props) => {
    return (
        <div>
            <ul className="tab">
                {
                    props.list.map((item, index) =>
                        <li key={item.id} onClick={() => handleClick(index)} className={props.current === index ? 'active' : ''}>{item.text}</li>
                    )
                }
            </ul>
            <div>
            </div>
        </div>
    )
    function handleClick(index) {
        props.myevent(index)
    }
}
export default TabBar;