自定义表单控件之可选择的表格

使用 antd 中的 Form 时常会通过 getFieldDecorator 来实现数据的双向绑定，可以有效避免去写大量重复的受控代码。其本质是一个高阶函数，会在合适的时机(默认是 onChange 事件)自动收集被包装组件的 value。常见组件如 Input、TextArea、Select 等在 Form 中的用法可以参考 Ant Design Demo 用法，本文只介绍如何在 Form 中自定义表单控件。
可选择的表格作为 表单控件 在中后台业务中很常见，但实际上相当一部分同学都是通过受控的方式去处理表格表单的，下面将介绍如何编写一个可复用的 FormTable 表单控件。

实现原理

根据 getFieldDecorator 的文档可以了解到，被包装的表单控件都默认会被下发 onChange 和 value 属性，分别用于 收集子节点值的触发事件 和 子节点值的属性名称，并且可以通过 trigger 和 valuePropName 自定义这两个属性。

undefined

初始化项目

通过 create-umi 来初始化项目(需要全局安装 umi，参考官方文档)。

$ mkdir demo-form-table && cd demo-form-table
$ yarn create umi

undefined

应用类型选择 antd，即可创建项目。

编写 FormTable 组件

新建 components/FormTable.js，初始化如下:

import React from 'react';
import { Table } from 'antd';

class FormTable extends React.Component {
  constructor(props) {
    super(props);
  }

  render () {
    return (
      <Table { ...this.props }/>
    );
  }
}

export default FormTable;

对于可选择的表格来说，需要新增 rowSelection 属性，这里将 selectedRowKeys 作为 FormTable 的值:

render() {
  const { selectedRowKeys } = this.state;
  const rowSelection = {
    selectedRowKeys,
    onChange: this.handleSelectChange,
  };
  const newProps = {
    ...this.props,
    rowSelection,
  }
  return (
    <Table {...newProps} />
  );
}

这里 handleSelectChange 函数的作用是通过 rowSelection.onChange 函数获取 selectedRowKeys，然后通过下发的 onChange 属性函数来收集 FormTable 的值:

handleSelectChange = selectedRowKeys => {
  const { onChange } = this.props;
  if (onChange) {
    onChange(selectedRowKeys);
  }
};

我们还需要根据下发的 value 维护 FormTable 内部的 selectedRowKeys 状态，不然无法保留上次的 选中项:

static getDerivedStateFromProps(props) {
  const newState = {
    prevProps: props,
  };
  const { value } = props;
  if ('value' in props) {
    // 将下发的 value 赋值给 FormTable，这里将 selectedRowKeys 作为 FormTable 的值
    newState.selectedRowKeys = value;
  }
  return newState;
}

测试一下

是不是很简单？接下来我们就在 page/index.js 中测试一下我们刚刚写的 FormTable 组件吧!

import React from 'react';
import { Form } from 'antd';
import FormTable from '../components/FormTable';
import styles from './index.css';

const FormItem = Form.Item;

class IndexPage extends React.Component {
  render() {
    const { form: { getFieldDecorator, getFieldValue } } = this.props;
    const columns = [{
      title: 'Name',
      dataIndex: 'name',
      render: text => <a href="javascript:;">{text}</a>,
    }, {
      title: 'Age',
      dataIndex: 'age',
    }, {
      title: 'Address',
      dataIndex: 'address',
    }];
    const dataSource = [{
      key: '1',
      name: 'John Brown',
      age: 32,
      address: 'New York No. 1 Lake Park',
    }, {
      key: '2',
      name: 'Jim Green',
      age: 42,
      address: 'London No. 1 Lake Park',
    }, {
      key: '3',
      name: 'Joe Black',
      age: 32,
      address: 'Sidney No. 1 Lake Park',
    }, {
      key: '4',
      name: 'Disabled User',
      age: 99,
      address: 'Sidney No. 1 Lake Park',
    }];
    return (
      <div className={styles.container}>
        <Form>
          <FormItem label="表格表单项">
            {
              getFieldDecorator('selectedRowKeys', {})(<FormTable dataSource={dataSource} columns={columns} />)
            }
          </FormItem>
        </Form>
        <h4>选中项为: {getFieldValue('selectedRowKeys') && getFieldValue('selectedRowKeys').join(', ')}</h4>
      </div>
    );
  }
}

export default Form.create()(IndexPage);

效果如下👇所示，完整代码见仓库。

undefined

frontend9 / fe9-library

自定义表单控件之可选择的表格 #55

实现原理

初始化项目

编写 FormTable 组件

测试一下