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

B 端物料组件库

---
title: AreaSelector-单选
order: 2
---

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

const data = [
  {
    children: [],
    label: '澳门特别行政区',
    divLevel: 1,
    value: '820000',
  },
  {
    label: '浙江省',
    divLevel: 1,
    value: '330000',
    children: [
      {
        parentCode: '330000',
        label: '杭州市',
        divLevel: 2,
        value: '330100',
        children: [
          {
            children: [],
            parentCode: '330100',
            label: '余杭区',
            divLevel: 3,
            value: '330110',
          },
          {
            children: [],
            parentCode: '330100',
            label: '西湖区',
            divLevel: 3,
            value: '330106',
          },
        ],
      },
      {
        parentCode: '330000',
        label: '台州市',
        divLevel: 2,
        value: '331000',
        children: [
          {
            children: [],
            parentCode: '331000',
            label: '临海市',
            divLevel: 3,
            value: '331082',
          },
          {
            children: [
              {
                parentCode: '331001',
                label: 'xxx',
                divLevel: 4,
                value: '9999999',
                children: [],
              },
            ],
            parentCode: '331000',
            label: '市辖区',
            divLevel: 3,
            value: '331001',
          },
        ],
      },
    ],
  },
];
class App extends Component {
  constructor(props) {
    super(props);
    this.state = {
      // 单选回显数据结构
      value: [
        {
          name: '浙江省',
          divLevel: 1,
          code: '330000',
          childElements: [
            {
              parentCode: '330000',
              name: '杭州市',
              divLevel: 2,
              code: '330100',
              childElements: [
                {
                  childElements: [],
                  parentCode: '330100',
                  name: '余杭区',
                  divLevel: 3,
                  code: '330110',
                },
              ],
            },
          ],
        },
      ], // 单选回显数据结构
      dataSource: [],
    };
  }

  componentDidMount() {
    this.setState({
      dataSource: data,
    });
  }

  // select改变触发
  onSingleChange = (value, codeData, renderData, item, obj) => {
    console.log('onSingleChange', value, codeData, renderData, item, obj);
    this.setState({
      value,
    });
  };

  render() {
    return (
      <div>
        <AreaSelector
          onChange={this.onSingleChange}
          value={this.state.value}
          multiple={false}
          dataSource={this.state.dataSource}
          hasClear
        />
      </div>
    );
  }
}

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