Antdのチェックボックスを使って全選択機能を実装する(II)

無効化ロジックフローチャートの追加

コード

/*

* 著者：Wangxinyue

* @Date: 2018-12-28 18:13:04

* 最終更新者: wangxinyue

* @最終更新時刻：2018-12-29 11:14:28

* groupList 完全に選択された配列のコレクション

* checkboxKey オブジェクトベースの配列を使用する場合に使用します（一意な識別子）。

* マルチセレクトボックスchangeCheckのコールバック関数は、データ（isSelectAll if all, checked if checked, checkedArr checked array, changeArr changed array, checkedList checked collection array, changeList changed collection array）を返す関数です。

* checkboxGroupChild 子要素ノード

* defaultCheckedArr デフォルトのチェック済み配列

* selectAllClass セレクトオールスタイル

* selectAllNode selectAllNode

* disabledOption 無効化機能

*/

import React, { Component } from 'react'.

antd' から { Checkbox } をインポートします。

import PropTypes from 'prop-types'

const CheckboxGroup = Checkbox.Group.CheckboxGroup。

class WXYCheckboxGroup extends コンポーネント { <未定義

static propTypes = { <未定義

groupListです。PropTypes.array.isRequired,//全選択コレクション

checkboxGroupChild: PropTypes.node.isRequired,//複数のチェックボックスの子要素

changeCheck: PropTypes.func,//データの変更情報を取得する

checkboxKey: PropTypes.string,//チェックボックスの一意な識別子

defaultCheckedArr: PropTypes.array,//デフォルトのチェックされた配列

}

状態 = { <未定義

checkedArr: [],//現在チェックされているマルチセレクトボックスの配列

indeterminate: true,// すべてのチェックボックスの状態

checkAll: false,//すべてをチェックするかどうか

lastcheckedArr: [],//最後にチェックした複数セレクトボックスの配列

allCheckedAll: [],//全てのチェックの配列

disableAndCheckedArr: []

};

componentDidMount = () => {。 <未定義

const { defaultCheckedArr = [], checkboxKey, groupList, disabledOption }. = これ .プロップス

allCheckedAll = [] とする。

if (disabledOption) { <未定義

//無効な未チェックのデータをフィルタリングする

allCheckedAll = groupList.filter( 一 => !disabledOption(one) || defaultCheckedArr.includes(one[checkboxKey]))

}

allCheckedAll = checkboxKey ? allCheckedAll.map( 1 => one[checkboxKey]) : allCheckedAll

これ .setState({. <未定義

checkedArr: defaultCheckedArr,

lastcheckedArr: defaultCheckedArr,

allCheckedAll: allCheckedAll。

disableAndCheckedArr: これ .getDisableAndChecked()

})

}

//無効化されたデータおよび選択されたデータを取得する

getDisableAndChecked = () => {。 <未定義

const { defaultCheckedArr = [], checkboxKey, groupList, disabledOption }. = これ .プロップス

disableAndChecked = groupList.filter()とする。 一 => disabledOption(one) && defaultCheckedArr.includes(one[checkboxKey]))

//キーのみを返す

return disableAndChecked.map( 一 => one[checkboxKey])。

}

// 単一選択操作

onChange = ( checkedArr ) => { <未定義

const { allCheckedAll } = (全チェック済み) これ .状態

これ .setState({. <未定義

checkedArr,

lastcheckedArr: checkedArr,

不定期： !checkedArr.length && (checkedArr.length < allCheckedAll.length),

checkAll: checkedArr.length === allCheckedAll.length,

});

これ .getChangeObject(checkedArr, false)

}

// すべて選択操作

onCheckAllChange = ( e ) => { <未定義

const { disabledOption }. = これ .プロップス

const { allCheckedAll, disableAndCheckedArr } =. これ .状態

let checkedArr = e.target.checked ? allCheckedAll : [].

if (disabledOption) { <未定義

checkedArr = [... .checkedArr, ... .disableAndCheckedArr] とする。

}

これ .setState({. <未定義

checkedArr: checkedArr,

lastcheckedArr: checkedArr,

不定期：false。

checkAll: e.target.checked,

});

これ .getChangeObject(checkedArr, true)

}

//変更データの取得と返却

getChangeObject = ( checkedArr , isSelectAll ) => { <未定義

const { changeCheck } = これ .プロップス

const { lastcheckedArr } =. これ .状態

let checked = checkedArr.length > lastcheckedArr.length

let changeArr = これ .diff(checkedArr、lastcheckedArr)

changeCheck && changeCheck(isSelectAll, checked, checkedArr, changeArr, これ .getListByArr(checkedArr), これ .getListByArr(changeArr))です。

}

//文字列の配列に基づいたオブジェクト型の配列を返す

getListByArr = ( arr ) => { <未定義

const { groupList, checkboxKey } = (グループリスト、チェックボックスキー) これ .プロップス

return groupList && checkboxKey ? groupList.filter() 一つ => arr.includes(one[checkboxKey])) : []

}

//異なる要素を持つ2つの配列を比較する [1,2,3] [1,2] return [3].

diff( arr1 , arr2 ) { <未定義

var newArr = [];

var arr3 = [];

for (var i = 0; i < arr1.length; i++) { { {... <未定義

if (arr2.indexOf(arr1[i]) === -1)

arr3.push(arr1[i])となります。

}

var arr4 = [];

for (var j = 0; j < arr2.length; j++) { { {... <未定義

if (arr1.indexOf(arr2[j]) === -1)

arr4.push(arr2[j])となります。

}

newArr = arr3.concat(arr4);

newArr を返します。

}

レンダー() { <未定義

const { checkboxGroupChild, selectAllClass, selectAllNode = "selectAll" } =。 これ .プロップス

を返す(

<div>

div クラス名 ={selectAllClass}>

< チェックボックス

不定期 ={ <未定義 これ .state.indeterminate}のようになります。

変更時 ={ <未定義 これ .onCheckAllChange}

チェック済み ={ <未定義 これ .state.checkAll}>

{selectAllNode}

</ チェックボックス >

</div>

< チェックボックスグループ 値 ={ <未定義 これ .state.checkedArr} 変更時 ={( チェック値 ) => これ .onChange(checkedValues, これ )}>

{checkboxGroupChild} です。

</ チェックボックスグループ >

</div>

);

}

}

class Test extends コンポーネント { <未定義

コンストラクタ( プロップス ) { <未定義

スーパー (プロップス)を使用します。

これ .state = {}です。

}

チェンジチェック = ( チェック済み , checkedArr , changeArr , チェックリスト , 変更リスト ) => { <未定義

コンソール .log("checked", checked,

"checkedArr", checkedArr,

"changeArr"、changeArr。

"checkedList"、checkedList。

"changeList", changeList)。

}

disabledOption = ( 1 ) => { <未定義

return one.disabled

}

レンダー() { <未定義

const defaultcheckedArr = ['despite', 'jiake', 'xuzi'];

const plainList = [

{ name: "Pete", key: "pite" }.

{ name: "jacket", key: "jiake" }.

{ name: "Xu Zi", key: "xuzi", disabled: true }.

{ name: "孟获", key: "menghuo" }.

{ name: "秋", key: "qiuji" }.

{ name: "子曰", key: "ziyue", disabled: true }.

{ name: "雪儿", key: "xueer", disabled: true }.

]

を返す(

< WXYCheckboxGroup

defaultCheckedArr ={defaultcheckedArr} です。

グループリスト ={plainList}

チェックボックスキー = 'キー'

checkboxGroupChild ={plainList.map( 一 => < 商品名 キー ={one.key} 一 ={one} />)}となります。

チェンジチェック ={ <未定義 これ .changeCheck}を使用します。

disabledOption ={ <未定義 これ .disabledOption}. />

);

}

}

エクスポートデフォルトのTestです。

クラス Item extends コンポーネント { <未定義

コンストラクタ( プロップス ) { <未定義

スーパー (プロップス)を使用します。

これ .state = {}です。

}

レンダー() { <未定義

const { one }. = これ .プロップス

を返す(

<div>

< チェックボックス 値 ={one.key} 無効 ={one.disabled} />

{one.name}

</div>

);

}

}