點(diǎn)擊【改變2】文字變成 另外一個(gè)數(shù)據(jù)，點(diǎn)擊【改變】在將原來的數(shù)據(jù)還原，請問如何實(shí)現(xiàn)？

點(diǎn)擊【改變2】文字變成 另外一個(gè)數(shù)據(jù)，點(diǎn)擊【改變】在將原來的數(shù)據(jù)還原，請問如何實(shí)現(xiàn)？

import React from 'react';

import Pannel from './Pannel';


class Basic extends React.Component {

    constructor() {

        super();
        this.state = {
            data: '',
            dataChinaTelecom: '',
            dataChinaUnicom: ''
        }
        this.changeHandle = this.changeHandle.bind(this);
        this.changeHandle2 = this.changeHandle2.bind(this);


    }

    _initialize() {
        var  data01 = {
            "name": "北京",
            "value": 1,
            "delay": 1530.1,
            "lostPacket": 78.1,
            "tracerouteData": [
                "traceroute to 211.100.2.184 (211.100.2.184), 30 hops max, 60 byte packets",
                "1  61.152.168.129  2.222 ms  2.550 ms  2.806 ms",
                "2  61.152.168.161  5.637 ms  6.038 ms  6.433 ms",
                "3  192.168.3.5  2.485 ms  2.618 ms  2.616 ms",
                "4  * * *",
                "5  101.95.207.49  4.647 ms  4.734 ms  6.002 ms",
                "6  101.95.88.170  29.569 ms  35.434 ms  35.152 ms",
                "7  * * *",
                "8  * * *",
                "9  * * *",
                "10  211.100.2.184  43.286 ms  97.256 ms  32.275 ms"
            ]
        }

        var  data02 = {
            "name": "北京",
            "value": 1,
            "delay": 1530.1,
            "lostPacket": 78.1,
            "tracerouteData": [
                "traceroute to 211.100.2.184 (211.100.2.184), 30 hops max, 60 byte packets",
                "1  61.152.168.129  2.222 ms  2.550 ms  2.806 ms",
                "2  61.152.168.161  5.637 ms  6.038 ms  6.433 ms",
                "3  192.168.3.5  2.485 ms  2.618 ms  2.616 ms",
                "4  * * *",
                "5  101.95.207.49  4.647 ms  4.734 ms  6.002 ms",
                "6  101.95.88.170  29.569 ms  35.434 ms  35.152 ms",
                "7  * * *",
                "8  * * *",
                "9  * * *",
                "10  211.100.2.184  43.286 ms  97.256 ms  32.275 ms"
            ]
        }

        this.setState(
            {
                data: data01,
                dataChinaTelecom: data01,
                dataChinaUnicom: data02
            }
        )
    }

    changeHandle (){
        this.setState(
            {
                data: this.state.dataChinaTelecom
            }
        )
    }

    changeHandle2 (){
        this.setState(
            {
                data: this.state.dataChinaUnicom
            }
        )
    }

    componentWillMount() {

        console.log('組件將要渲染')
        this._initialize()
    }



    componentDidMount(){
        console.log('組件正式渲染')
    }

    render() {

        console.log('渲染render()')

        var divStyle = {

        }

        var valueStyle = {
            fontSize: 50,
            color: '#FF0004'
        }

        const dataCS = this.state.data;

        console.log(dataCS.name)

        return (



            <div id style={divStyle} className='data-line'>

                <div>
                    <button onClick={this.changeHandle.bind(this, '人生不如意')}>改變1</button>
                    <button onClick={this.changeHandle2.bind(this, '人生不如意')}>改變2</button>
                </div>

                <div>
                    <Pannel
                        tableContent={dataCS.name}
                    />
                </div>

            </div>
        )
    }
}

export default Basic;

import React from 'react'

class Pannel extends React.Component{

    constructor() {
        super();
        this.state = {
            tableContent: ''
        }
    }

    componentDidMount() {

        this.setState({
            tableContent: this.props.tableContent
        });
        console.log('==================出庫初始化==================')
        console.log(this.props.tableContent);
    }

    // 組件接收到新的props時(shí)調(diào)用，并將其作為參數(shù)nextProps使用
    componentWillReceiveProps(nextProps) {

        console.log('==================出庫分割線==================')
        console.log(nextProps.tableContent)
        this.setState({
            tableContent: nextProps.tableContent
        });
    }

    render() {
        return <table className="pannel-table" border="1" cellSpacing="0">
            <tbody>
            <tr>
                <td colSpan="4">
                    {this.state.tableContent}
                </td>
            </tr>
            </tbody>
        </table>
    }


}

export default Pannel;