快捷導(dǎo)航

react中涉及的增加,刪除list方式

更新時(shí)間：2024年01月03日 09:47:39 作者：趙乘風(fēng)_i

這篇文章主要介紹了react中涉及的增加,刪除list方式,具有很好的參考價(jià)值,希望對大家有所幫助,如有錯(cuò)誤或未考慮完全的地方,望不吝賜教

react涉及的增加,刪除list

做的項(xiàng)目中有一個(gè)功能是需要對多個(gè)Input組成的list可以新增和刪除。

剛開始想的解決是直接使用index來做，這個(gè)可以新增，但是做不了刪除，會(huì)出現(xiàn)list錯(cuò)亂的問題，即使是刪除中間的某一個(gè)，但總也是刪除的最后一個(gè)。原因是index-1只會(huì)刪除最后一個(gè)，再重新渲染后會(huì)刷新列表。

如果只是新增但是不填寫內(nèi)容，那么刪除了也無所謂，但如果新增后填寫再刪除就出問題了。

解決辦法是使用唯一標(biāo)識符，也就是id，就是前端自己生成id，根據(jù)id刪除就不會(huì)錯(cuò)亂了。

在這個(gè)項(xiàng)目中，因?yàn)樾陆ê途庉嬍峭粋€(gè)頁面，而且在進(jìn)入這個(gè)頁面之后會(huì)根據(jù)是否有xxId來區(qū)分是新建還是編輯，因?yàn)闀?huì)請求兩個(gè)不同的接口來獲取數(shù)據(jù)。所以在從接口請求回來的返回值那邊做了處理，添加了唯一標(biāo)識符，也就是selfId。我是對dispatch后獲取的result進(jìn)行操作。

如下：

const dealListData = (result) => {
    // console.log('listR', result);
    if (result.length===0) {
        result.push({
            selfId:1
        });
    } else {
        result.map((item, index) => {
            item.selfId = String(index + 1);
            return item;
        });
    }
    // console.log(result);
    return result;
};

新增的函數(shù)

list是指幾個(gè)Input組成的塊，是要對其新增和刪除

handleAdd = () => {
     let selfId = Number(this.state.list[this.state.list.length-1].selfId) + 1;
     // console.log(this.state.list[this.state.list.length-1].selfId +1);
     this.props.form.validateFields((err, value) => {
        if (!err) {
            this.state.list.push({
                selfId:selfId
        });
        this.props.onChange(this.state.list);
      }
   });
}

刪除的函數(shù)

handleDeleteItem = (i, selfId) => {
    this.setState({ list: this.state.list.filter(item => item.selfId !== selfId) }, () => {
          // console.log('delete', this.state.list);
          this.props.onChange(this.state.list);
    });
}

根據(jù)selfId進(jìn)行刪除

因?yàn)閘ist是我又重新封裝的子組件,而值要實(shí)時(shí)反映到父組件上去，需要都需要通過this.props.onChange事件去實(shí)時(shí)更新。這樣刪除和新增就沒有問題了。