react子组件的值怎么传到父组件上,我是用的highchart(一个做图表类的插件)想把组件中的x轴的值传给父组件.

Question

我是用的highchart(一个做图表类的插件),想把组件中的x轴的值传给父组件.
然后实现点击每个区域之后,下边的图表能做出相应的变化,代码如下:

子组件:let Component = React.createClass({

componentWillMount() {
},

render() {

    let {barLoPowerValue,barLoTime,text,}=this.props;
    let configPie = {
        chart: {
            height:400,
            backgroundColor: "rgba(46, 46, 65, 0)",
            plotBackgroundColor: "rgba(46, 46, 65, 0)",
            plotBorderWidth: 0,
            borderWidth: 0,
            plotShadow: false,
            paddingLeft:100,
            backgroundColor: {
                linearGradient: [0, 0, 500, 500],
                stops: [
                  //  [0, 'rgb(56, 85, 94)'],
                    [0, 'rgb(37, 41, 48)']
                ]
            },
            borderRadius:10
        },

        title: {
            text: text,
            align:'left',
             x : "0",
            style:{
                color:"#fff",
                fontSize:"25px",
                fontFamily:"微软雅黑"
            }
        },
        //图例说明
        legend: {
            align:"right",
            verticalAlign: "top",
            itemStyle: {
                color: "#fff",
                fontSize:"18px",
                fontWeight:"normal",
                fontFamily:"微软雅黑"
            }
        },
        tooltip: {
            // pointFormat: '{series.name}: <b>{point.percentage:.1f}%</b>'
            // pointFormat: "<b>{point.percentage:.0f}%</b>"
        },
        credits: {
            enabled: false //不显示highCharts版权信息
        },
        colors: ['#4CDB9D', '#1E664A', '#000','#134833', '#082B1F']
        ,
        plotOptions: {

            pie: {
                allowPointSelect: false,
                cursor: 'pointer',
                borderWidth: 0,
                size: '100%',
                innerSize: '80%',
                dataLabels: {
                    enabled: false
                }
            },
            bar:{
                animation: true
            }
        },
        plotOptions: {
            series: {
                cursor: 'pointer',
                events: {
                    click: function(e) {
                        alert('我要获取的X轴的值：'+e.point.category);
                        
                        //就是这个值
                    }
                }
            },
            column: {
                pointPadding: 0.2,
                borderWidth: 0,
                pointWidth: 40
            }
        },
        xAxis: {
            lineWidth: 1,
           //lineColor: "red",
            tickWidth: 0,
            labels: {
                y: 20, //x轴刻度往下移动20px
                style: {
                    color: '#fff',//颜色
                    fontSize:'14px'  //字体
                }
            },
            categories:barLoTime,
        },
        yAxis: {
           // lineWidth: 1,
           // lineColor: "red",
            //tickWidth: 4,

            labels: {
                y: 10, //x轴刻度往下移动20px
                style: {
                    color: '#fff',//颜色
                    fontSize:'14px'  //字体
                }
            },
        },
        series: [{
            name: '实际健康度',
            type: 'column',
            data: barLoPowerValue
        }
        

        ]
    };
    return (
        <ReactHighcharts config={configPie}/>
    );
},

});

我想获取的就是上边的 我要获取的值e.point.category;

父组件的代码:
render() {

    let {wind,buttonAction,actbt=0, value0,inputOnChange, onFocus,changecolor} = this.props;
    return (
    <div className={`${styles.tbox}`}>
                <div className={`${styles.box_shadow} ${styles.logofa}`}>
                    <Hly_t barLoTime={barLoTime1} barLoPowerValue={wind==undefined? barLoPowerValue1:wind} text={text0[actbt]+"月集团各区域健康度"}></Hly_t>
                    <div className={styles.logo}> </div>
                </div>
            </div>
            )
            
            请大神帮助
            
            

Answer 1

父组件传一个方法给子组件，子组件更新的数据，执行这个方法，就回调给父组件了。

Class Parent extends React.component {
    constructor (props){
        super(props)
    }
    
    callback(category) {
        console.log(category)
    }
    
    render () {
        return (
        <div>
            <Child callback={this.callback.bind(this)}/>
        </div>)
    }
}

Class Child extends React.component {
    constructor (props) {
        super(props)
    }
    
    example: (category) {
        this.props.callback(category)
    }
    
    
}

先学会最基本的组件通讯，再去看redux。走先学会。

Answer 2

redux 管理组件之间通信

文档
http://cn.redux.js.org/index....
开发工具
http://www.zhufengpeixun.cn/a...

Answer 3

使用 redux 管理你的数据源，在你的父子组件中引用同一个属性，无论在哪个模块将这个属性更新了，引用的地方都会做相应的更新。

建议你慢慢了解 redux 并且使用它，对你的项目管理很有帮助的。