@aliretail/react-materials-components/demo/SupplyRelationshipRatio/example.md

B 端物料组件库

---
title: SupplyRelationshipRatio-Usage
order: 1
---

本 Demo 演示一行文字的用法。
该demo中，仓库已固定，需传warehouseName，warehouseId不用传，保存在外部就行，编辑状态

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

class App extends Component {
  constructor(props) {
    super(props);
    this.state = {
      value: [],
      warehouseId:"",
      visible: false,
      warehouseName:"默认选中的仓库，warehouseName值"
    };
  }

  onChange = (value) => {
    this.setState({
      value,
    });
  };

  onWarehouseChange = (value)=>{
    // 这边调用接口查找渠道信息
    console.log(value)
    this.setState({
      warehouseId: value
    },()=>{
      this.onChange([])
    })
  }

  onChannelChange = (key,value)=>{
    const { warehouseId } = this.state;
    // 这边调用接口查找店铺信息
    this.setState({
      value
    })
  }

  render() {
    const columns = [
      {
        dataIndex: 'store',
        title: '同步店铺',
        type: 'select',
      },
      {
        dataIndex: 'ratio',
        title: '同步比例',
        type: 'numberPicker',
      },
    ];
    const warehouseList = [
      {
        value: '507',
        label: 'dgptest仓库(dgptest89989)',
        name: 'dgptest仓库',
      },
    ];
    const channelList = [
      {
        value: '507',
        label: '渠道A(dgptest89989)',
        name: '渠道A',
      },
      {
        value: '508',
        label: '渠道B(dgptest89989)',
        name: '渠道B',
      },
    ];
    const storeData = {
      507: [
        {
          value: '507',
          label: 'dgptestd店(dgptest89989)',
          name: 'dgptestd店',
        },
      ],
      508: [
        {
          value: '508',
          label: 'dgptestd店(dgptest89989)',
          name: 'dgptestd店',
        },
      ],
    };
    const { value,warehouseId, visible, warehouseName } = this.state;
    return (
      <div>

        <SupplyRelationshipRatio
          value={value}
          columns={columns}
          channelList={channelList}
          storeData={storeData}
          warehouseList={warehouseList}
          visible={visible}
          onChange={this.onChange}
          onWarehouseChange={this.onWarehouseChange}
          onChannelChange={this.onChannelChange}
          warehouseId={warehouseId}
          warehouseName={warehouseName}
          ratioKey="ratio"
        />
      </div>
    );
  }
}

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