点击【改变2】文字变成 另外一个数据，点击【改变】在将原来的数据还原，请问如何实现？

Question

点击【改变2】文字变成 另外一个数据，点击【改变】在将原来的数据还原，请问如何实现？

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时调用，并将其作为参数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;

Answer 1

import React from 'react';

class Test extends React.Component{
  constructor() {
    super(...arguments);
    this.state = {text: 1};
  }

  render() {
    const {text} = this.state;
    const {dataChinaTelecom, dataChinaUnicom} = this.props;
    return(
      <div>
        <button onClick={() => this.setState({text: 1})}>改变一</button>
        <button onClick={() => this.setState({text: 2})}>改变二</button>
        <div>{text === 1 && dataChinaTelecom}</div>
        <div>{text === 2 && dataChinaUnicom}</div>
      </div>
    );
  }
}