@aliretail/react-materials-components/demo/AreaSelector/GraduallyAreaSelector.md

B 端物料组件库

---
title: 逐级地区选择器-单选
order: 3
---

```jsx
import React, { Component } from 'react';
import ReactDOM from 'react-dom';
import { AreaSelector } from '@aliretail/react-materials-components';

// appCode、apiCode 为必传项
const appCode = 'retailforce_oms',
  apiCode = 'region_three_level_linkage',
  areaDataSource = [
    {
      enableDate: 'Mon Jan 01 14:00:00 CST 2007',
      code: '130000',
      divLevel: 1,
      isFullName: 1,
      name: '河北省',
      style: 5,
      state: 1,
    },
    {
      enableDate: 'Mon Jan 01 14:00:00 CST 2007',
      code: '150000',
      divLevel: 1,
      isFullName: 1,
      name: '内蒙古自治区',
      style: 5,
      state: 1,
    },
  ],
  // 默认值，单选数组长度为1，多选数组长度大于1
  initValue = [
    {
      provCode: '1112225',
      cityCode: '111000',
      districtCode: '2333322',
      townCode: '112122',
      name: '古荡街道', // 单选： name: "浙江省/杭州市/古荡街道"；  多选：name: "古荡街道",
      code: '112122',
    },
    {
      provCode: '1112225',
      cityCode: '111000',
      districtCode: '2333322',
      townCode: '112122',
      name: '古荡街道', // 单选： name: "浙江省/杭州市/古荡街道"；  多选：name: "古荡街道",
      code: '112122',
    },
  ],
  placeholder = '请选择',
  isPreview = false,
  multiple = false,
  disabled = false,
  readOnly = false,
  hasClear = true;

class App extends Component {
  onChange = (value) => {
    console.log(value);
  };

  render() {
    return (
      <div>
        <AreaSelector.Gradually
          appCode={appCode}
          apiCode={apiCode}
          areaDataSource={areaDataSource}
          initValue={initValue}
          placeholder={placeholder}
          isPreview={isPreview}
          multiple={multiple}
          disabled={disabled}
          hasClear={hasClear}
          readOnly={readOnly}
          onChange={this.onChange}
        />
      </div>
    );
  }
}

ReactDOM.render(<App />, mountNode);
```