Ant Design Ant Design 学习记录
遇到的问题：
- 点击列表中的一个字段 ， 显示出一条指定id（其他筛选条件的）数据
解决这个问题之前，要先了解 Antd的 Table中的 Column 列描述数据对象，是 columns 中的一项，Column 使用相同的 API。 官网地址
从中我们可以知道 : render 生成复杂数据的渲染函数，参数分别为（当前行的值，当前行数据，行索引），@return 里面可以设置表格行/列合并 类型是函数 (text, record, index) => { }
点击后弹出以下列表
解决：
两种写法 ：
- 直接给子组件传 props值， 然后子组件渲染this.props.item
- 给子组件传id值，然后子组件通过URL传给后台，后台筛选出满足条件的数据。
补充：
0.给子组件传值 ： <Share happy={record} loadUserList={()=> {this._loadUserList()}}/> 子组件接收值
1.设置state中值的时候 不要直接赋值 ， 要 使用规范写法
1 this.setState({
2 visible_father: true
3 })
2.子组件接到数后不能展示列表？
1 onClick={() => {
2 this.setState({
3 visible_father: true //修改列表展示为true
4 })
5 }}
3.dataSource中的数据this.props.item 是对象 所以要再外面加一个[] 使其变为数组
4.const {number, visible_father, data, loading,} = this.state; 解构赋值后 ， 就不需要在this.state.xxx了
5.<Modal /> 有个visible属性，表示是否显示对话框。
占位
需要掌握的：
1.Form表单
-
Form.create 经过
Form.create包装的组件将会自带this.props.form属性，this.props.form常用API ： getFieldDecorator 用于和表单进行双向绑定，详见下方描述
class CustomizedForm extends React.Component {}
CustomizedForm = Form.create({})(CustomizedForm);
this.props.form.getFieldDecorator(要传的值, options)
经过 getFieldDecorator 包装的控件，表单控件会自动添加 value（或 valuePropName 指定的其他属性） onChange（或 trigger 指定的其他属性），数据同步将被 Form 接管，这会导致以下结果：
-
你不再需要也不应该用
onChange来做同步，但还是可以继续监听onChange等事件。 -
你不能用控件的
valuedefaultValue等属性来设置表单域的值，默认值可以用getFieldDecorator里的initialValue。 -
你不应该用
setState，可以使用this.props.form.setFieldsValue来动态改变表单值(可以设置默认值)。
-
validateFields 校验并获取一组输入域的值与 Error，若 fieldNames 参数为空，则校验全部组件 / resetFields 重置一组输入控件的值（为
initialValue）与状态，如不传入参数，则重置所有组件
handleSubmit = (e) => {
e.preventDefault();
this.props.form.validateFields((err, values) => {
if (err) {
return;
}
values.rate = values.rate / 100;
window.$http.postForm('/api/', {...this.state.item,...values}).then(res => {
if (res.status === 10000) {
window.$message.success('提交成功！');
this.props.form.resetFields();
this.setState({visible: false})
this.getBonusList()
} else {
window.$message.error(res.message);
}
}).catch((err) => {
window.$message.error('通讯失败');
})
});
}
- Form.Item 表单域
2. Affix 固钉 https://ant.design/components/affix-cn/#header
注意：Affix 内的元素不要使用绝对定位，如需要绝对定位的效果，可以直接设置 Affix 为绝对定位：
<Affix style={{ position: 'absolute', top: y, left: x }}>...</Affix>
3.Card 卡片 https://ant.design/components/card-cn/#header
4.父子传值 ， 传方法
首先父组件调用子组件，写一个item = { recodr（columns表单所有数据） } 写一个 refreshList方法
然后再子组件调用 (使用this.props.XXX)调用父组件的XXX
调用属性 （这里又把父组件的值传给了子组件CustomForm）
<CustomForm
content={this.state.content} onSubmit={this.onSubmit} url={'/api/backend/distribution/time/category/save'}
value={{ id: this.props.item.id }}
values={this.props.item}
space={86400}
/>
调用方法
onSubmit = () => {
this.setState({
visible: false
})
this.props.refreshList()
}
5.弹窗 Modal
6.文本域： const { textArea } = Input 去掉右下角调整大小按键 ： CSS resize：none；
7.上传图片 Upload
8.修改状态
{
// 150,
title: '操作',
dataIndex: 'status', //verified
key: 'status',
render: (text, item) => (
<>
{item.status != 1 ? null :
<Switch
checked={text === 1}
onChange={() => {
this.changeStatus(text, item.id);
}}
/>}
</>
)
}
9.删除一行记录
{
title: '操作',
render: (text, item) => {
return (
<div>
<Button size={'small'} type={'primary'} onClick={() => {
this.props.history.push('/content/carousel/edit/' + item.id)
}}>
编辑
</Button>
<Popconfirm
title="确定要删除吗？"
okText="确定"
cancelText="取消"
onConfirm={() => {
window.$http.postForm('/api/web/carousel/delete', {id: item.id}).then(res => {
if (res.status === 10000) {
window.$message.success('删除成功');
this._loadNewsList()
} else if (res.status !== 18888) {
window.$message.error(res.message);
}
})
}}
>
<Button size={'small'} type={'danger'} style={{marginLeft: 20}} onClick={() => {
}}>删除</Button>
</Popconfirm>
</div>
);
}
}
10 徽标微
import {Badge} from '@ant-design/react-native';
<Badge dot>
<Touchable style={{position: 'relative'}}>
<Image source={message} />
</Touchable>
</Badge>
import {Badge} from '@ant-design/react-native';
<Badge dot>
<Touchable style={{position: 'relative'}}>
<Image source={message} />
</Touchable>
</Badge>