platform-bi-web/app/components/chartDesigner/header.jsx

import React from 'react';
import { Input, Select, Icon, Button } from 'antd';
const Option = Select.Option;
import { Link } from 'react-router-dom'
import './header.less';
import { connect } from 'dva';
import { ActionCreators } from 'redux-undo';
import chartDesigner from '../../models/chartDesigner';

const Header = ({ chartDesigner, dispatch }) => {
    return (
        <div className='header'>
            <div className='header-item toolbar-back'>
                <Button>
                    <Link to='/'>返回</Link>
                </Button>
            </div>
            <div className='header-item toolbar-title'>
                <Input
                    className='input-title' 
                    addonAfter={<Icon type="edit" 
                        onClick={() => {
                            const input = this.refs.titleInput
                            input.focus()
                        }}
                    />}
                    onChange={(e) => {
                        dispatch({ type: 'chartDesigner/setModel', name: 'header', value: { label: e.target.value } });
                    }}
                    value={chartDesigner.header.label}
                />
            </div>
            <div className='header-item toolbar-buttons'>
                <div className=''>
                    <Button onClick={() => {
                        dispatch({ type: 'chartDesigner/fetchChartData'});
                    }}>请求测试</Button>
                    <Button className='button-uodo' icon='undo' onClick={() => {
                        dispatch(ActionCreators.undo());
                    }}>撤销</Button>
                    <Button className='button-redo' onClick={() => {
                        dispatch(ActionCreators.redo());
                    }}>重做</Button>
                    <Button className='button-uodo' >预览</Button>
                    <Button className='button-uodo' >保存</Button>
                </div>
            </div>
        </div>
    )
}

function mapStateToProps({ present: { chartDesigner } }) {
    return { chartDesigner: chartDesigner }
}
export default connect(mapStateToProps)(Header);