标签：index const react width state 实例 danList 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
    })
  }

标签：index,const,react,width,state,实例,danList,antd,model
来源： https://blog.csdn.net/weixin_55555471/article/details/121148586

本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享；
2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关；
3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关；
4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除；
5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。