react.js - react组件件通讯

问题描述

问 题

父组件(index.jsx)

import { Header } from './layout/Header';
class Main extends Component {
    constructor(props) {
        super(props);
        this.state = {
            collapsed: false
        };
    }
    /* 渲染组件 */
    render() {
        return (
            <div collapsed={this.state.collapsed}>
                <Header />
            </div>
        );
    }
}

子组件(header.jsx)

class Header extends Component {
    constructor(props) {
        super(props);
        this.state = {
            collapsed: false
        };
    }
    toggle = () => {
        this.setState({
          collapsed: !this.state.collapsed
        });
      }
    /* 渲染组件 */
    render() {
        return (
            <div onClick={this.toggle}></div>
        );
    }
}

怎么点击按钮让父类index.jsx 也能感受到？着急着急

解决方案

父组件(index.jsx)

import { Header } from './layout/Header';
class Main extends Component {
    constructor(props) {
        super(props);
        this.state = {
            collapsed: false
        };
    }
    handleToggle = () => {
        // 
    }
    /* 渲染组件 */
    render() {
        return (
            <div collapsed={this.state.collapsed}>
                <Header handleToggle={this.handleToggle}/>
            </div>
        );
    }
}

子组件(header.jsx)

class Header extends Component {
    constructor(props) {
        super(props);
        this.state = {
            collapsed: false
        };
    }
    toggle = () => {
        this.props.handleToggle();
        this.setState({
          collapsed: !this.state.collapsed
        });
      }
    /* 渲染组件 */
    render() {
        return (
            <div onClick={this.toggle}></div>
        );
    }
}

这篇关于react.js - react组件件通讯的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！