AntDのMultiple-Cascaderのdefalutvalues

背景

Cascaderにmultipleオプションをつけた際にdefalutvaluesの記述がdocを見ても分かリませんでした。
ここに備忘録としてまとめます。

sample ソース

import React from "react";
import "./index.css";
import { Cascader } from "antd";

interface Option {
  value: string | number;
  label: string;
  children?: Option[];
  disableCheckbox?: boolean;
}

const options: Option[] = [
  {
    label: "Light",
    value: "light",
    children: new Array(20)
      .fill(null)
      .map((_, index) => ({ label: `Number ${index}`, value: index })),
  },
  {
    label: "Bamboo",
    value: "bamboo",
    children: [
      {
        label: "Little",
        value: "little",
        children: [
          {
            label: "Toy Fish",
            value: "fish",
            disableCheckbox: true,
          },
          {
            label: "Toy Cards",
            value: "cards",
          },
          {
            label: "Toy Bird",
            value: "bird",
          },
        ],
      },
    ],
  },
];

const onChange = (value: string[][]) => {
  console.log(value);
};

const App: React.FC = () => (
  <Cascader
    style={{ width: "100%" }}
    options={options}
    onChange={onChange}
    multiple
    maxTagCount="responsive"
    defaultValues={[["bamboo", "little"], [["light", 0]]]}
  />
);

export default App;

defaultValuesに二次元配列を指定し、親から子までのvalueを左から要素にすることで設定することができます。

defaultValues={[["bamboo", "little"], [["light", 0]]]}