AntDチェックボックスの3種類のステータス処理

• 1つのCheckboxに対して、checkedとuncheckedの2つの値しかありません。
• しかし、チェックボックスグループの場合、checked、indeterminate、uncheckedの3つの値があります。

AntDは、同じ値を Checkbox Group は以下のように実装されています。

import React, { useState } from 'react';
import ReactDOM from 'react-dom';
import 'antd/dist/antd.css';
import '. /index.css';
import { Checkbox } from 'antd';

const CheckboxGroup = Checkbox.Group;

const plainOptions = ['Apple', 'Pear', 'Orange'];
const defaultCheckedList = ['Apple', 'Orange'];

const App = () => {
  const [checkedList, setCheckedList] = useState(defaultCheckedList);
  const [indeterminate, setIndeterminate] = useState(true);
  const [checkAll, setCheckAll] = useState(false);

  const onChange = checkedList => {
    setCheckedList(checkedList);
    setIndeterminate(
      ! ! checkedList.length && checkedList.length < plainOptions.length
    );
    setCheckAll(checkedList.length === plainOptions.length);
  };

  const onCheckAllChange = e => {
    setCheckedList(e.target.checked ? plainOptions : []);
    setIndeterminate(false);
    setCheckAll(e.target.checked);
  };

  return (
    

          Check all
        




  );
};

ReactDOM.render(
, document.getElementById('container'));

Copy the code

CodeSandBox-Checkboxグループ 3つの状態の実装

を設定したい場合は Checkbox Group を2つの状態にします。

1. すべて選択解除 checkbox は indeterminate 属性は
2. を変更します。 onChange の中に setCheckAll の判定条件

const onChange = checkedList => {
  setCheckedList(checkedList);
  setCheckAll(checkedList.length ! == 0);
};
Copy the code

• 完全なコードは以下の通りです。

import React, { useState } from 'react';
import ReactDOM from 'react-dom';
import 'antd/dist/antd.css';
import '. /index.css';
import { Checkbox } from 'antd';

const CheckboxGroup = Checkbox.Group;

const plainOptions = ['Apple', 'Pear', 'Orange'];
const defaultCheckedList = [];

const App = () => {
  const [checkedList, setCheckedList] = useState(defaultCheckedList);
  const [checkedAll, setCheckAll] = useState(false);

  const onChange = checkedList => {
    setCheckedList(checkedList);
    setCheckAll(checkedList.length ! == 0);
  };

  const onCheckAllChange = e => {
    setCheckedList(e.target.checked ? plainOptions : []);
    setCheckAll(e.target.checked);
  };

  return (
    

          Check all
        




  );
};

ReactDOM.render(
, document.getElementById('container'));

Copy the code

CodeSandBox-Checkboxグループ 2つの状態の実装