react demo - 通过state 、props 数据传递

Text.js

import React, {
    Component,
    PropTypes,
} from 'react';
import { connect } from 'react-redux';
import 'style/index.css'; //引入css样式
import { getCen, getHelpCenAdd, getHelpCenSub, setVal} from 'redux/modules/helpCen';//引入 getCen
import { bindActionCreators } from 'redux';

    //getCen 与 state 建立连接
@connect((state) => ({
    // 与props 建立联系,赋值
    helpCen: state.helpCen
    //state 树 更新数据
}), (dispatch) => bindActionCreators({getCen, getHelpCenAdd, getHelpCenSub, setVal}, dispatch))

class Test extends Component {
    //isShowMore = false;

    static contextTypes = {
        //路由实践
        router: PropTypes.object.isRequired
    };

    //只有第一次执行
    constructor(props) {
        //props 属性改变,state 数据改变

        //props 更新
        super(props);

        //设置本地state
        this.state = {
            isShow: false，
        };

    }

    // 生命周期
   // componentDidMount() {
        //执行getCen 更新state树, 数据传给props  (参数传递,父级向子级传递数据)
        //this.props.getCen();

   // }

    goTo() {
        this.context.router.push('index')
    }

    touchHandler() {
        // option 1
//        this.isShowMore = !this.isShowMore;
//        console.log(this.isShowMore);
        //option 2
        this.props.getCen();
        this.setState({isShow : !this.state.isShow});
        //console.log(this.state.isShow);
    }

    //加
    touchAdd() {
        let valAdd = this.refs['input'].value;
        console.log(valAdd);
        this.props.getHelpCenAdd(valAdd);
    }

    //减
    touchSub() {
        let valSub = this.refs['input'].value;
        console.log(valSub);
        this.props.getHelpCenSub(valSub);
    }

　　handleChange(e) {
    　　this.props.setVal(e.target.value);
　　}

    render() {
        //拿到数据
        const mydata =  this.props.helpCen && this.props.helpCen.data;
        const result = this.props.helpCen && this.props.helpCen.result;
        let arr = [];
        //console.log(mydata, '11111');
        if(!!mydata) {
            console.log(mydata, '11111');
            mydata.map( (val, i) => {
                return arr.push(
                    <div key={i}>{ val.activeName }</div>
                )
            })
        }

        return (<div className="box">
            <div className="search">
                <input type="text" className="search-input" ref="input"
                       onChange={::this.handleChange}
                       value={result}/>
            </div>
            <button type="button" className="btn" onTouchTap={ ::this.touchAdd}>+</button>
            <button type="button" className="btn" onTouchTap={ ::this.touchSub}>-</button>
            <div>
            <button type="button" className="btn" onTouchTap={ ::this.touchHandler}>
            点我点我</button>
            {   mydata &&
                <div className="text">看这里
                    {!!this.state.isShow && arr}
                </div>
            }
                </div>
        </div>);
    }
}
export default Test;

-------------------------------------------------------------------------------------------------------------------------------------

HelpCenter.js

//在API中引入helpcen

import { getHelpCen } from 'api';

//定义变量
const GET_HELP_CEN_BEGIN = 'GET_HELP_CEN_BEGIN';
const GET_HELP_CEN_SUCCESS = 'GET_HELP_CEN_SUCCESS';
const GET_HELP_CEN_ERROR = 'GET_HELP_CEN_ERROR';
const GET_HELP_CEN_ADD = 'GET_HELP_CEN_ADD';
const GET_HELP_CEN_SUB = 'GET_HELP_CEN_SUB';
const SET_VALUE_ACTION = 'SET_VALUE_ACTION';

//data 置空
const originState = {
    data: [],
    result: 0,
}

//action

function getHelpCenBegin() {
    return {
        type: GET_HELP_CEN_BEGIN
    }
}

function getHelpCenSuccess(sus) {
    return {
        type: GET_HELP_CEN_SUCCESS,
        sus
    }
}

function getHelpCenError(err) {
    return {
        type: GET_HELP_CEN_ERROR,
        err
    }
}

export function getHelpCenAdd(add){
    return{
        type: GET_HELP_CEN_ADD,
        add
    }
}
export function getHelpCenSub(sub){
    return{
        type: GET_HELP_CEN_SUB,
        sub
    }
}

export function setVal(num) {
    return {
        type: SET_VALUE_ACTION,
        num
    };
}

//成功调用sus方法,失败调用err方法
export function getCen(id){
    return (dispatch, getState) => {
        return getHelpCen(id).then(
            (sus) => {
                dispatch(getHelpCenSuccess(sus));
            },(err) => {
                dispatch(getHelpCenError(err));
            })
    };
}


export default function helpCen(state = originState, action){
    switch(action.type){
        case GET_HELP_CEN_SUCCESS :
            let data = action.sus;
            return Object.assign({},state, {
                data: data,
                success: true
            });
            break;

        case GET_HELP_CEN_ERROR :
            return Object.assign({},state, {
                error:true
            });
            break;

        case GET_HELP_CEN_ADD :
            let valueAdd = action.add;
            valueAdd ++;
            return Object.assign({},state,{
               result: valueAdd
            });
            break;
        case GET_HELP_CEN_SUB :
            let valueSub = action.sub;
            valueSub --;
            return Object.assign({},state,{
                result: valueSub
            });
            break;
        case SET_VALUE_ACTION:
            return {
                result: action.num
            }
            break;

        default :
            return state;
    }
}