Antd的一些经验总结

Ant Design

这个月赶着做了一个汽车金融的后台评估系统，技术栈用的react+react-redux+react-router+antd+webpack,昨天新版本上线后总算有时间来总结总结了。Antd是蚂蚁金服的一个UI库，提供了各种各样的UI组件，方便开发者开发，提高开发效率。这里就总结一下在使用antd组件时遇到的一些问题。

Form表单

对于antd中form表单的使用其实碰到了很多问题（毕竟之前一直用的不多），对于实际业务中的需求来说，它基本满足了所有需求。

表单的初始值（回显）

实际业务中经常有编辑的操作，编辑操作必定要将之前编辑的数据展示在表单上，即回显。关于默认值的设置，antd不允许对表单组件用value或defaultValue两个属性来设置（仅仅针对使用了getFieldDecorator方法进行了绑定的组件），而推荐使用form属性下的setFieldsValue这个方法来设置默认值。由于不能用value或defaultValue来设值，所以对应的对于每个使用了getFieldDEcorator绑定了的组件可以用getFieldValue方法来获取相应的组件的值。

表单校验规则

实际业务中也经常要对用户输入的内容进行校验，除了校验表单是否必填，也会对表单输入内容做一些规则上的校验比如对于手机号码的校验，身份证的校验等等，这里可以通过form表单下的getFieldDecorator方法来进行设置，该方法有两个参数，如下：

getFieldDecorator(id, options) // 其中id是表单对应的name，options中可以设置一些参数用于对表单的限制

另外想要进行的规则校验可以写在options下的rules属性，该属性是一个数组，如下：

<FormItem {...formItemLayout} label={'银行卡号'}>
    {getFieldDecorator('cardId', {
            initialValue: id=='add'?'':this.state.editData.accountNo,
            rules: [{type:'string', required: true, message: '请输入银行卡号'},{
                validator: this.checkFormBankId,
            }],
        })(
        <Input placeholder="请输入银行卡号" maxLength="21"></Input>
    )}
</FormItem>

在rules数组中有两个子元素，第一个中的type表示该字段的类型，通过这个方法包裹的组件的默认值的变量类型是不一样的，这个时候就可以通过这个字段来设置接收的变量类型，默认是string类型，除了string还可以选择如下类型：

string: Must be of type string. This is the default type.
number: Must be of type number.
boolean: Must be of type boolean.
method: Must be of type function.
regexp: Must be an instance of RegExp or a string that does not generate an exception when creating a new RegExp.
integer: Must be of type number and an integer.
float: Must be of type number and a floating point number.
array: Must be an array as determined by Array.isArray.
object: Must be of type object and not Array.isArray.
enum: Value must exist in the enum.
date: Value must be valid as determined by Date
url: Must be of type url.
hex: Must be of type hex.
email: Must be of type email.

required表示该字段是否必填，message表示提示信息，当字段校验出错时会提示对应的内容。
validator就是我们所需要做的规则校验，对应的校验规则可以写在你的方法中。

Table表格

对于antd中的Table表格操作的最多的其实是带checkbox的表格

保留上一页的勾选

在开发过程中碰到过这种情况，在表格中勾选需要操作的选项后翻页，发现上页勾选的位置上这一页上也被勾选了，这显然是不科学的，造成这种现象的原因是有两点，一是表格数据是接口请求的并非一次性返回给你，因此下页数据请求过来后上页的数据没了，表格内部机制无法拿到的对应的行；二是没有给Table组件设置rowKeys属性，rowKeys属性可以用来让Table内部机制进行对行数据的筛选，一般rowKeys属性用行id来设置，这样可以保证每一行的rowkey不同，从而得到区分，代码如下：

Table className="che300-table" rowSelection={rowSelection} rowKey="projectId" columns={columns} dataSource={this.props.searchAftloanPkgData} pagination={pkgPaConf}></Table>

树形组件

对于antd的树形组件我一开始是很懵逼的，官方的文档demo写的不是很直观。

如何定义每一个节点的key值

树形组件的难点在于如何构建树形节点的key值，官方demo如下：

<Tree
    checkable
    defaultExpandedKeys={['0-0-0', '0-0-1']}
    defaultSelectedKeys={['0-0-0', '0-0-1']}
    defaultCheckedKeys={['0-0-0', '0-0-1']}
    onSelect={this.onSelect}
    onCheck={this.onCheck}
    >
    <TreeNode title="parent 1" key="0-0">
        <TreeNode title="parent 1-0" key="0-0-0" disabled>
        <TreeNode title="leaf" key="0-0-0-0" disableCheckbox />
        <TreeNode title="leaf" key="0-0-0-1" />
        </TreeNode>
        <TreeNode title="parent 1-1" key="0-0-1">
        <TreeNode title={<span style={{ color: '#1890ff' }}>sss</span>} key="0-0-1-0" />
        </TreeNode>
    </TreeNode>
</Tree>

由于树形结构的层级结构，key的设置并不容易，所以前后端对于数据结构的讨论较多，具体什么数据结构就不说了，讲不清。。。。唯一的痛点就是数据结构，其他没什么。

换肤，主题色的更改

antd是默认的蓝白风格，这次后台系统是黄黑风格，因此需要对antd进行换肤，具体的教程官方也有，有两种方式，一种是用新的样式覆盖，另一种是用webpack，这里选择使用webpack，通过loader进行less全局变量的替换，代码如下：

{
    loader: require.resolve('less-loader'),
    options: {
        modifyVars: {
        "@font-size-base": '14px',
        "@table-padding-vertical": '4px',
        "@table-padding-horizontal": '4px',
        "@table-header-bg": '#e9e9e9',
        "@primary-color": "#ffc847",
        "@btn-primary-color": "#333",
        "@text-color": '#fff',
        "@layout-body-background": '#2b2b2b',
        "@label-color": '#fff',
        "@input-bg": '#333',
        "@input-placeholder-color": '#666',
        "@table-row-hover-bg": '#534e41',
        "@component-background": '#333',
        "@tag-default-bg": '#ffc847',
        "@tag-default-color": '#fff',
        "@item-hover-bg": '#484235',
        "@background-color-base": '#484235',
        "@item-active-bg": '#484235',
        "@disabled-color": '#ffc847',
        "@table-header-bg": '#595959',
        "@heading-color": '#fff',
        "@text-color-secondary": '#fff',
        "@btn-default-color": '#333',
        "@border-color-split": '#595959',
        "@border-color-base": '#666',
        "@background-color-active": '#ffc847'
        },
    },
}

edit by AmamiRyoin