---
title: WKPickerCascaderSelector 级联选择器
group:
  title: 表单组件
  path: /form/
---

## 何时使用

WKPickerCascaderSelector 级联 picker 选择器组件

## 基本使用

```tsx
/**
 * title: 基本使用
 * desc: 基本使用方法
 */
import React, { useState } from 'react';
import PageWrapper from '../PageWrapper';
import { WKPickerCascaderSelector } from '@wakeapp/components';

const options = [
  {
    label: '广东',
    value: 1,
    children: [
      {
        label: '珠海',
        value: 11,
      },
      {
        label: '中山',
        value: 12,
      },
      {
        label: '深圳',
        value: 13,
      },
    ],
  },
  {
    label: '广西',
    value: 2,
    children: [
      {
        label: '桂林',
        value: 21,
      },
      {
        label: '南宁',
        value: 22,
      },
    ],
  },
];

export default () => {
  const [val, setVal] = useState<number[]>();
  const handleChange = (evt: { detail: { value: number[] } }) => {
    setVal(evt.detail.value);
  };

  return (
    <PageWrapper title="基本使用">
      <WKPickerCascaderSelector options={options} value={val} onChange={handleChange}></WKPickerCascaderSelector>
    </PageWrapper>
  );
};
```

## 动态级联选择

```tsx
/**
 * title: 级联选择
 * desc: 异步生成 options
 */
import React, { useState, useEffect } from 'react';
import PageWrapper from '../PageWrapper';
import { delay } from '@wakeapp/utils';
import {
  WKPickerCascaderSelector,
  WKPickerCascaderSelectorOption,
  WKPickerCascaderSelectorProps,
} from '@wakeapp/components';

const initialOptions = () => [
  {
    label: '1',
    value: 1,
  },
  {
    label: '2',
    value: 2,
  },
];

export default () => {
  const [val, setVal] = useState<string[]>();
  const [options, setOptions] = useState<Array<WKPickerCascaderSelectorOption<number>>>(initialOptions);

  const handleChange = (evt: { detail: { value: number[] } }) => {
    setVal(evt.detail.value);
  };

  const handleLoadData: WKPickerCascaderSelectorProps<number>['onLoadData'] = async evt => {
    console.log('load data', evt);
    await delay(1000);
    const { option } = evt.detail;
    // 动态加载三级
    if (option.label.split('-').length >= 3) {
      option.children = null;
      return;
    }

    option.children = new Array(Math.ceil(Math.random() * 10 + 1)).fill(0).map((i, index) => ({
      value: index,
      label: `${option.label}-${index}`,
    }));

    // 强制更新
    setOptions(v => [...v]);
  };

  return (
    <PageWrapper title="级联选择">
      <WKPickerCascaderSelector
        style={{ width: '100%', padding: '4px 8px', cursor: 'pointer' }}
        options={options}
        value={val}
        onChange={handleChange}
        onLoadData={handleLoadData}
      ></WKPickerCascaderSelector>
    </PageWrapper>
  );
};
```

## 属性

<API src='@wakeapp/components/WKPickerCascaderSelector/index.d.ts'></API>
