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

B 端物料组件库

---
title: FormTab-Usage
order: 1
---

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

class App extends Component {
  state={
    activeKey: ''
  }
   handleTabChange = (value) => {
    this.setState({
      activeKey: value
    })
  }
  render() {
     const tablist1 = [
        {
            "value": "tab1",
            "label": "标题1"
        },
        {
            "value": "tab2",
            "label": "标题2"
        },
    ]
      const tablist2 = [
        {
            "value": "1",
            "label": "111"
        },
        {
            "value": "2",
            "label": "222"
        }
      ]
  const {activeKey} = this.state;
    return (
      <div>
        <FormTab dataSource={tablist1} value={activeKey} onChange={this.handleTabChange} shape="pure"  />
      </div>
    );
  }
}

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