antd pro2.0 使用记录七：问题

目录：

列表数据返回

列表数据分页，选中的数据无效

修改 antd 默认样式

页面多表单校验

 

列表数据返回，选中的数据无效：

后台数据返回的是截取后的单页数据（是指每页返回的数据通过调用后台获取，获取的固定10/20条）时：

• 会导致搜索、排序等只能对当前页生效。
• 会导致前页选中的数据无效了。-- 官方组件的bug

   已解决：修改了组件 StandardTable / index.js handleRowSelectChange（）方法

  大致思路如下：记录上次传过来的 selectRows (this.props.selectedRows) 与当前的 selectRows参数 进行去重合并，后传回（传回操作是通过方法 onSelectRow【= this.props.onSelectRow】 进行改变 selectRows 的内容）

列表数据分页：

    页码变化需要调用响应的方法，触发事件机制为 onChange 事件；

    页码显示的  pagination，最 主要的参数为：

{
    total: 200, 
    current: 4
}

  其余属性类似，可直接查看 Pagination 。

 

修改 antd 默认样式

全局修改样式: 肯定是使用:global来修改，即:

:global{
   .ant-select-selection{
         background-color: grey; //设置颜色
    }
}

 页面多表单校验

参考：https://juejin.im/post/5cad6567e51d456e5a0728b3

         https://segmentfault.com/q/1010000018738969

问题描述：现在要实现一个功能：单页面多个表单要一个按钮进行提交，统一验证，但每个表单调用不同后台接口

分析：

• 必须多个表单分离；
• 必须全部验证；
• 表单分离识别以便于调用不同后台；

解决：关键的是使用 wrappedComponentRef 属性拿到这个Form的ref，简单的理解为拿到子组件的form实例，因此，可以在 handleCreate 函数中通过 this.formRef.getItemsValue() 调用自子组件的方法获取返回的 form 值。

// 关键理解：
<Form1 wrappedComponentRef={(form)=>this.form1=form}></Form1>
<Form2 wrappedComponentRef={(form)=>this.form2=form}></Form2>

//表单清空
this.form1.props.form.resetFields();
this.form2.props.form.resetFields();

 

在做antd项目时发现，使用Form.create()(xxx)创建的模块里面的Form表单提交前可以使用this.props.form.validateFieldsAndScroll()判断是否校验成功，this.props.form也就是整个页面模块的Form，那么，如果页面上有多个Form，此时再使用this.props.form.validateFieldsAndScroll()判断校验结果就是对整个页面的Form进行判断，并不能够对单个Form校验结果做判断，问题就在此，如何对单个Form做判断？

解决方法

1. 手动校验，通过对表单元素添加change事件监听，获取表单元素值，手动做校验，这不失为一个方法，但有违react设计的思想。
2. 把表单作为一个组件独立出去，页面通过props传入表单组件需要的值，在表单组件内部单独维护相关逻辑，这也是本文推荐的方式。

案例实现

Form子组件：

import React, { Component } from 'react';
import {Button, Form, Input, Select} from 'antd';

const FormItem = Form.Item;

class Forms extends Component{
  getItemsValue = ()=>{
      const val= this.props.form.getFieldsValue(); // 获取from表单的值
      return val;
  }
  render(){
    const formItemLayout = {
      labelCol: {
        xs: { span: 24 },
        sm: { span: 8 },
      },
      wrapperCol: {
        xs: { span: 24 },
        sm: { span: 16 },
      },
    };
    const { form, initValue1, initValue2, initValueList } = this.props;
    const { getFieldDecorator } = form; // 校验控件
    return(
      <Form style={{backgroundColor: '#fff', padding: '20px'}}>
        <FormItem
          {...formItemLayout}
          label={`相关数量`}
        >
          {getFieldDecorator(`amount`,{
            rules: [{
              message: '必填字段!',
              required: true
            }],
            initialValue: initValue1 ? initValue1 : undefined
          })(
            <Input placeholder="请输入"/>
          )}
        </FormItem>
        <FormItem
          {...formItemLayout}
          label={`选择相关名称`}
        >
          {getFieldDecorator(`name`,{
            rules: [{
              message: '必填字段!',
              required: false
            }],
            initialValue: initValue2 ? initValue2 : undefined
          })(
            <Select
              placeholder="请选择"
              onChange={this.handleSelectChange}
            >
              {
                initValueList && initValueList.map((x, i) => (
                  <Option value={x.Id} key={i}>{x.name}</Option>
                ))
              }
            </Select>
          )}
        </FormItem>
      </Form>
    )
  }
}

export default Form.create()(Forms);        //创建form实例

Form子组件，接收父组件传过来的初始数据，组件中 getItemsValue自定义方法返回表单的值，需要在父组件中调用。

父组件：

import React, { Component } from 'react';
import { Modal, Button } from 'antd';
import Forms from './Forms'

export default class Modals extends Component {
    constructor(props) {
        super(props);
        this.state = {
          visible: false,
          initValue1: 0,
          initValue2: 'myName',
          initValueList: ["李云龙", "李荣基", "李达"]
        };
    }
    handleClick = () => {
        this.setState({
            visible: true
        })
    };
    handleCreate = () => {
        let values = this.formRef.getItemsValue();
        // 获取到子组件form的值，做进一步操作
        this.setState({
            visible: false
        })
    };
    render() {
        return (
            <section>
                <Modal
                  visible={this.state.visible}
                  title="编辑"
                  onOk={this.handleCreate}
                  onCancel={() => {
                    this.setState({ visible: false });
                  }}
                  okText="保存"
                  cancelText="取消"
                >
                  <Forms
                    initValue1={initValue1}
                    initValue2={initValue2}
                    initValueList={initValueList}
                    wrappedComponentRef={(form) => this.formRef = form}
                  />
                </Modal>
                <Button onClick={()=>{ this.handleClick }}>点击弹框</Button>
            </section>
        );
    }
}

这里关键的是使用wrappedComponentRef属性拿到这个Form的ref，简单的理解为拿到子组件的form实例，因此，可以在handleCreate函数中通过this.formRef.getItemsValue()调用自子组件的方法获取返回的form值。至此，上面的问题就解决了。

关于 wrappedComponentRef 的描述详见antd官网描述。