@aliretail/react-materials-components/demo/DataImport/usage.md

B 端物料组件库

---
title: DataImport-Usage
order: 1
---

大数据导入

```jsx
import React, { Component } from 'react';
import ReactDOM from 'react-dom';
import { DataImport } from '@aliretail/react-materials-components';
import {
  Button
} from '@alifd/next';
import '../../src/DataImport/index.scss';

class App extends Component {
  constructor(props) {
    super(props);

    this.state = {
      isComplex: false,
    }
  }

  handleClick = () => {
    const { isComplex } = this.state;
    this.setState({
      isComplex: !isComplex,
    });
  }

  render() {
    const { isComplex } = this.state;
    return (
      <div>
        <div>
          导入模式切换: <Button onClick={this.handleClick}>{isComplex ? '两步提交' : '单次提交'}</Button>
        </div>
        <br/>
        <DataImport
          isComplex={isComplex}
          appCode="omsdemo"
          onOk={() => console.log('ok')}
          onCancel={() => console.log('cancel')}
        />
      </div>
    );
  }
}

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