Ant Design Pro 运用点滴 [3]

Ant Design Pro 运用点滴

没想到自己能跟AntDesignPro较劲这么久，学习嘛，较的时间越长学得东西就会越多。
同时发现，前两篇写得太不精致了。努力吧，只有学的越多，知道的越多，写出东西才能够清晰。

写个component

1. 为什么要用到component?

我也不整不明白，可能是因为有了component更容易复用。接触vue或者基于react的ant design pro，都不可避免的要用到component。既然大家都用，就一起用好了。

2. 在ant design pro下component大体样式

这个都可以看ant design pro下components目录怎么写的。

“百闻不如一见，百见不如试一下”
先看看大体代码，这个是我刚刚写的封装braft-editor的component。

//引入React，以及PureComponent
import React, { PureComponent } from 'react';
//引入BraftEditor以及相关样式
import BraftEditor from 'braft-editor'
import 'braft-editor/dist/braft.css'
import styles from './index.less'

// Editor类继承PureComponent
class Editor extends PureComponent {
    //在装载组件(mounting)之前调用会React组件的构造函数。
    //当实现Component子类的构造函数时，应该在任何其他语句之前调用super(props)。
    //否则，this.props将在构造函数中未定义，这可能导致错误。
    //注意，const { value } = this.props;
    constructor(props) {
        super(props);
        const { value } = this.props;
        this.state = {
            contentFormat: "html",
            initialContent: value,
            htmlContent: ""
        }
        this.editorInstance = null
    }
    //当Editor中内容发生改生时，
    //注意，const { value, onChange } = this.props;
    //因为基于ant design pro，在调用组件时，要使用的form提供getFieldDecorator方法，
    //这个方法会向组件注入value参数，onChange方法，
    //每次调用onChange方法都会去改变value，从而刷新整个组件。
    //为什么会这样那，其实Ant Design 会在表单组件外层包裹一层组件，维护一个State值，
    //每次onChange都是在改变外部state值，调用setState来刷新表单组件。
    handleChange = (htmlContent) => {
        const { value, onChange } = this.props;
        this.setState({
            htmlContent
        });
        onChange(htmlContent);
    }

    render() {
        return ( <div className = { styles.editor } >
            <BraftEditor initialContent = { this.state.initialContent }
            forceNewLine onHTMLChange = {this.handleChange}
            contentFormat = { this.state.contentFormat }
            ref = {(instance) => { this.editorInstance = instance }}
            /> </div>
        )

    }

    //componentDidMount()在组件装载到DOM后立即调用。
    //如果需要进行DOM节点的初始化则应该在这里来执行该逻辑。
    //如果需要从远程端点加载数据(ajax)，那么这是处理网络请求的最好地方。
    //在此方法中设置state会去重新渲染DOM。
    componentDidMount() {

    }

    componentWillMount() {
    }
}
export default Editor;

3. 调用compoent

调用其实是比较简单的，首先import，再使用就可以了。但是我们用到了ant design pro，中间还进行传值，就要麻烦一些。

import React, { PureComponent } from 'react';
import { connect } from 'dva';
import {
  Form,
  Input,
  Button,
  Card,
  Icon,
} from 'antd';
import PageHeaderLayout from '../../layouts/PageHeaderLayout';
import styles from './style.less';
import Editor from '../../components/Editor';


const FormItem = Form.Item;


@connect(({ loading }) => ({
  submitting: loading.effects['form/submitRegularForm'],
}))
@Form.create()
export default class Create extends PureComponent {
  handleSubmit = e => {
    e.preventDefault();
    const { form, dispatch } = this.props;

    form.validateFieldsAndScroll((err, values) => {
      console.log(values);
      if (!err) {
        dispatch({
          type: 'form/submitRegularForm',
          payload: values,
        });
      }
    });
  };

  render() {
    const { submitting, form } = this.props;
    const { getFieldDecorator, getFieldValue } = form;

    const formItemLayout = {
      labelCol: {
        xs: { span: 24 },
        sm: { span: 4 },
      },
      wrapperCol: {
        xs: { span: 24 },
        sm: { span: 12 },
        md: { span: 10 },
      }
    };
    const editorItemLayout = {
      labelCol: {
        xs: { span: 24 },
        sm: { span: 4 },
      },
      wrapperCol: {
        xs: { span: 24 },
        sm: { span: 12 },
        md: { span: 16 },
      }
    };

    const submitFormLayout = {
      wrapperCol: {
        xs: { span: 24, offset: 0 },
        sm: { span: 10, offset: 4 },
      },
    };

    return (
      <PageHeaderLayout
        title="文章编辑"
        content="文章的编辑及发布。"
      >
        <Card bordered={false}>
          <Form onSubmit={this.handleSubmit} hideRequiredMark style={{ marginTop: 8 }}>
            {/* 在这里我们要开始用到刚才写的Editor组件，注意initialValue这个函数是用到传值的，直接Editor内用value属性传值会报错 */}
            <FormItem {...editorItemLayout} label="编辑区">
              {getFieldDecorator('content', {
                rules: [
                  {
                    required: true,
                    message: '请填写文章内容',
                  },

                ],initialValue:"我是传的值"
              })(<Editor />)}
            </FormItem>

            <FormItem {...submitFormLayout} style={{ marginTop: 32 }}>
              <Button type="primary" htmlType="submit" loading={submitting}>
                提交
              </Button>
              <Button style={{ marginLeft: 8 }}>保存</Button>
            </FormItem>
          </Form>
        </Card>
      </PageHeaderLayout>
    );
  }
}

相关参考

1. React.Compoent的官方文档
2. React.Component用法
3. 实现Ant Design 自定义表单组件