react 动态添加卡片

​
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>

效果如下：