Ant Design学习笔记
问：Table组件默认只有选中当前页的全选状态，也就是说，如果后端一下子返回前端21条数据，每页20条数据，数据就一共2页，我现在是在第1页，如果按照antd默认功能，我不能让第1页和第2页都变成全选或者全不选状态，如果我希望有个按钮，可以修改所有数据的选中状态，怎么办？
答：原文链接：https://blog.csdn.net/luzhaopan/article/details/84578155
代码如下：
// 全选函数
// 传入选中的行的序号ID 和 选中的行
let handleRowSelectChange = (selectedShopRowKeys, selectedShopRow) => {
// 在 state中 维护这个状态
dispatch({
type : 'groupManageModel/updateState',
payload : {
selectedShopRowKeys,
selectedShopRow,
}
});
};
// 全选的方法
let selectAll = (e) => {
const isChecked = e.target.checked;
dispatch({
type : 'groupManageModel/updateState',
payload : {
isChecked
}
});
// shopDataSource 是这页面表格的所有数据
// selectedRows 为state中存放的选中的表格行
// 如果现在是全选状态，就变成全不选
if(shopDataSource.length === selectedShopRow.length){
handleRowSelectChange([],[]);
}else{
// 如果现在是部分选中状态，就变成全选
//把索引数组里的值由String转换成Number
const keys = Object.keys(shopDataSource)
const index = [];
keys.forEach(item=>{
index.push(Number(item))
});
handleRowSelectChange(index,shopDataSource)
}
};
const rowSelection = {
selectedRowKeys: selectedShopRowKeys,
onChange: rowSelectChange,
getCheckboxProps: record => ({
disabled: record.disabled,
}),
};
<Checkbox onChange={selectAll} checked={isChecked}>商品信息</Checkbox>
<Table
columns={shopColumns}
dataSource={shopDataSource}
pagination={pagination}
rowSelection={rowSelection}
rowKey={'id'}
/>
问：父组件没有传form给子组件，为什么子组件里有form？
image.png
答：
看最后一行：export default Form.create({})(AddTicketComponent);
Form.create({})是一个函数，这里用到了高阶组件，函数的参数是一个组件，然后返回另一个组件，其中Form.create({})返回的组件里有form这个对象
参考链接：https://www.jianshu.com/p/4f25eca3dee5
经 Form.create() 包装过的组件会自带 this.props.form 属性
使用组件时，在一般情况下，用value更好，尽量不用defaultValue
有两层弹出框的地方，这两个地方都要加上zIndex
引入子组件的话，子组件首字母要大写，比如：
import Abc from '地址',不要
import abc from '地址'
image.png
答：Select组件加上getPopupContainer={triggerNode => triggerNode.parentElement}这个属性
问：
<FormItem {...formItemLayout} label="主题名称">
{getFieldDecorator('themeName', {
initialValue: goodsInfo.themeName || '',
rules: [
{ required: true , message: '请输入主题名称', },
{ max: 10 , message: '主题名称最多10个字', },
],
})(
<Input placeholder={'请输入主题名称(最多10个字)'} />
)}
</FormItem>
function addTheme() {
dispatch({
type : ${namespace}/updateState,
payload : {
isSetTheme : true,
id : '', //清空之前编辑过的主题id，这样在弹出框里知道是新增还是编辑
themeModalsTitle : '新建',
goodsInfo : {}
}
});
}
点击‘新建’按钮时，清除了数据，再进去时，发现Modal的数据仍然还在，怎么办？
答：给Modal设置destroyOnClose={true}
使用Modal组件时，不要给Modal设置高度，如果设置了高度，会导致取消按钮和确定按钮可能不在右下角，样式就很丑
columns里的width不要写死宽度，用百分比，否则可能出现表头和下面的主体不对齐：
const tableColumns = [
{
dataIndex: 'id',
key: 'id',
title: '任务ID',
width: '10%', //如果Table组件的列数少，建议使用百分比，不要写死为多少px；如果列数多的话，还是要写多少px的
render: (text, _record) => (
<div>{text}</div>
),
},
问：怎么让RangePicker不能选择今天之前的日期？
答：
function disabledDate(current) {
return current && current < moment().add(-1, 'd');
}
<RangePicker disabledDate={disabledDate} />
image.png
Select组件里面如果没有Option，就会显示initialValue的内容；如果Select组件里有Option，那么会显示initialValue与Option的key属性匹配时的Option组件中间的文本（比如initialValue是'12'，匹配<Option key='12'>id=12的内容</Option>，就显示'id=12的内容'）
如果Table的列数不多，给每列设置宽度时用百分比来，不要写死为多少px
问：dva项目里，有什么办法可以查到哪行代码导致死循环的报错吗？我在一个组件的onChange以后，进行了更新其他Select组件的Option里的值，结果就报错了‘Maximum call stack size exceeded’，我估计是有个地方不停地重复渲染，但是不知道哪里报错，
image.png
答：我最后没办法，只好把这个地方重新写，多写一个表单元素时，就去看下页面效果，发现当我加到某个地方时，就报错了，是一个地方的initialValue是变量名 * 100，当新建时，变量的值是undefined，当我改成变量名 ? 变量名 * 100 : 1时，页面就不报错了
