@aliretail/react-materials-components
Version:
80 lines (73 loc) • 2.58 kB
Markdown
---
title: ServiceArea-Usage
order: 1
---
本 Demo 演示查看物流的用法。
```jsx
import React, { Component } from 'react';
import ReactDOM from 'react-dom';
import { ServiceArea } from '@aliretail/react-materials-components';
class App extends Component {
state = {
value: ["350500"],
readOnly: true,
};
handleChange = (list) => {
//当前获得的codeList
console.log(list);
this.setState({
value: list,
});
};
render() {
const { value } = this.state;
return (
<div>
<h3>change事件</h3>
<ServiceArea
value={value}
onChange={this.handleChange}
// areaApi="list_town_cover_info"
// appCode="retailforce_oms_pro"
// tableApi="render_region_guid"
areaApiUrl="https://rap2api.alibaba-inc.com/app/mock/6013/api/retailforce_oms_pro/list_town_cover_info"
tableApiUrl="https://rap2api.alibaba-inc.com/app/mock/6013/api/retailforce_oms_pro/render_region_guid"
/>
<h3>readOnly</h3>
<ServiceArea
value={value}
onChange={this.handleChange}
readOnly={this.state.readOnly}
areaApiUrl="https://rap2api.alibaba-inc.com/app/mock/6013/api/retailforce_oms_pro/list_town_cover_info"
tableApiUrl="https://rap2api.alibaba-inc.com/app/mock/6013/api/retailforce_oms_pro/render_region_guid"
/>
<h3>initValues回显</h3>
<ServiceArea
onChange={this.handleChange}
value={value}
// areaApi="list_town_cover_info"
// appCode="retailforce_oms_pro"
// tableApi="render_region_guid"
areaApiUrl="https://rap2api.alibaba-inc.com/app/mock/6013/api/retailforce_oms_pro/list_town_cover_info"
tableApiUrl="https://rap2api.alibaba-inc.com/app/mock/6013/api/retailforce_oms_pro/render_region_guid"
/>
<h3>extFetchListParams</h3>
<ServiceArea
value={value}
onChange={this.handleChange}
// areaApi="list_town_cover_info"
// appCode="retailforce_oms_pro"
// tableApi="render_region_guid"
areaApiUrl="https://rap2api.alibaba-inc.com/app/mock/6013/api/retailforce_oms_pro/list_town_cover_info"
tableApiUrl="https://rap2api.alibaba-inc.com/app/mock/6013/api/retailforce_oms_pro/render_region_guid"
extFetchListParams={{
lastSelectedRegionCode: [],
currentSelectedRegionCode: [],
}}
/>
</div>
);
}
}
ReactDOM.render(<App />, mountNode);
```