antd pro2.0 使用记录七：问题
作者：互联网
目录：
列表数据返回，选中的数据无效：
后台数据返回的是截取后的单页数据（是指每页返回的数据通过调用后台获取，获取的固定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做判断？
解决方法
- 手动校验，通过对表单元素添加
change事件监听，获取表单元素值，手动做校验，这不失为一个方法，但有违react设计的思想。 - 把表单作为一个组件独立出去，页面通过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官网描述。
标签：form,Form,记录,pro2.0,校验,表单,props,组件,antd 来源： https://www.cnblogs.com/ostrich-sunshine/p/11022316.html