react antd中在model组件中实现动态增删一行数据

model组件，因为在model中使用Form组件会导致动态删除行的时候一直是从后向前删除，所以这边用的是纯div来实现，通过变量danList来遍历里面的键实现动态的增加删除行

<Modal
          title={`${Object.keys(record).length > 0 ? '编辑' : '新增'}应用`}
          visible={modalVisibleZcmapp}
          bodyStyle={{ paddingBottom: 0 }}
          onOk={this.addOrEditRow}
          draggable={false}
          onCancel={this.closeModalVisibleZcmapp}
          cancelText="取消"
          okText="确定"
          width="900px"
        >
          {/* <Form layout='inline'> */}
          <div className={styles.minchen} style={{ display: 'flex', justifyContent: 'space-between', marginBottom: 8 }}>
            <div style={{ width: '30%' }} >数据应用</div>
            <div style={{ width: '15%' }}>数据实例数</div>
            <div style={{ width: '30%' }} >实例应用</div>
            <div style={{ width: '15%' }}>实例数</div>
            <div style={{ width: '5%' }} />
          </div>

          {
            danList.map((dan, ind) => {
              return <div style={{ display: 'flex', justifyContent: 'space-between', marginBottom: 12 }}>
                <Select placeholder="请选择数据应用"
                  onChange={e => {
                    this.canaryAppFn(e)
                  }}
                  style={{ width: '30%' }}
                  value={dan.canaryAppName}
                >
                  {
                    canaryAppList.map(item => {
                      return <Option value={[item.applicationName, item.imageId, item.applicationId, ind]} key={item.applicationName}>{item.applicationName}</Option>
                    })
                  }
                </Select>

                <InputNumber min={0} style={{ width: '15%' }} placeholder="请输入实例应用实例数" value={dan.canaryAppNum} onChange={(e) => { this.canaryAppNumFn(e, ind) }} />

                <Select placeholder="请选择实例应用" onChange={e => this.prodAppFn(e)}
                  style={{ width: '30%' }}
                  value={dan.prodAppName}
                >
                  {
                    prodAppList.map(item => (
                      <Option value={[item.applicationName, item.applicationId, ind]} key={item.applicationName}>{item.applicationName}</Option>
                    ))
                  }
                </Select>

                <InputNumber min={0} placeholder="请输入实例应用数" style={{ width: '15%' }} onChange={(e) => { this.prodAppNumFn(e, ind) }} value={dan.prodAppNum} />

                {
                  Object.keys(record).length > 0 ? <span style={{ width: '5%' }} /> : <span style={{ width: '5%' }}>
                    {
                      danList.length <= 1 ? null : <Icon type="minus" onClick={() => { this.delFn(ind) }} style={{ marginRight: "10px" }} />
                    }
                    {
                      danList.length - ind === 1 ?
                        <Icon type="plus" onClick={() => { this.addFn() }} /> : null
                    }
                  </span>
                }
              </div>
            })
          }
        </Modal>

使用到的事件

   // 通过imageId来获取实例应用，保存数据应用
  canaryAppFn = (e) => {
    const { canaryAppList, danList, prodAppList } = this.state
    // console.log(e);
    let index = e[3]
    this.props.dispatch({
      type: '***/*******',//接口路径
      params: {
        imageId: e[1],
        projectId: projectId()
      },
      cb: payload => {      //接口获取的参数
        danList[index].canaryAppName = e[0],
          danList[index].canaryAppId = e[2],
          danList[index].prodAppList = payload,
          // console.log(payload);
          this.setState({
            prodAppList: payload,
            canaryAppName: e[0],
            canaryAppId: e[2],
            danList
          })
      }
    })
  }

  // 保存实例应用的名称和id号
  prodAppFn = (e) => {
    const { prodAppList, danList } = this.state
    let index = e[2]
    // console.log(e, prodAppList);
    danList[index].prodAppName = e[0],
      danList[index].prodAppId = e[1],
      this.setState({
        prodAppId: e[1],
        prodAppName: e[0],
        danList,
      })
  }
  // -删除
  delFn = (index) => {
    const { danList, canaryAppName } = this.state
    danList.splice(index, 1);
    this.setState({
      danList: [...danList]
    })
  }
  // +增加
  addFn = () => {
    const { danList } = this.state
    danList.push({})
    this.setState({
      danList
    })
  }
  // 数据实例数
  canaryAppNumFn = (e, index) => {
    const { danList } = this.state
    danList[index].canaryAppNum = e
    this.setState({
      danList
    })
  }
  //实例数
  prodAppNumFn = (e, index) => {
    const { danList } = this.state
    danList[index].prodAppNum = e
    this.setState({
      danList
    })
  }