let id = 0;
add = () => {
const { form } = this.props;
// can use data-binding to get
const keys = form.getFieldValue('keys');
const nextKeys = keys.concat(++id);
// can use data-binding to set
// important! notify form to detect changes
form.setFieldsValue({
keys: nextKeys,
});
}
const { getFieldDecorator, getFieldValue } = this.props.form;
getFieldDecorator('keys', { initialValue: [] });
const keys = getFieldValue('keys');
const formItems = keys.map((k, index) => (
<div
key={k}
>
{getFieldDecorator(`names[${k}]`
)(<Col span={8}>
<Card style={{ margin: '0px 0px' ,width: 239 }}>
<p>Card content</p>
<p>Card content</p>
<p>Card content</p>
</Card>
</Col>
)}
</div>
));
<Content style={{
margin: '24px 16px', padding: 0, background: '#fff', minHeight: 300,
}}
>
<div style={{ padding:15,minHeight:55}}>
<row>
<Col span={20}>
<h3>进行中的项目</h3>
</Col>
<Col span={4}>
<Button type="dashed" onClick={this.add} style={{ width: '100%' }}>
<Icon type="plus" /> 添加卡片
</Button>
</Col>
</row>
</div>
<Row>
<Col span={8}>
<Card style={{ margin: '0px 0px' ,width: 239 }} title="Default size card"
extra={<a href="#">More</a>}>
<p>Card content</p>
<p>Card content</p>
<p>Card content</p>
</Card>
</Col>
<Col span={8}>
<Card style={{ margin: '0px 0px' ,width: 239 }} title="Default size card"
extra={<a href="#">More</a>}>
<p>Card content</p>
<p>Card content</p>
<p>Card content</p>
</Card>
</Col>
<Col span={8}>
<Card style={{ margin: '0px 0px' ,width: 239 }} title="Default size card"
extra={<a href="#">More</a>}>
<p>Card content</p>
<p>Card content</p>
<p>Card content</p>
</Card>
</Col>
</Row>
<Row style={{display:'inline'}}>
{formItems}
</Row>
</Content>
效果如下: