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

B 端物料组件库

---
title: Dialog For Adding Commodities
order: 2
---

添加商品的用法。

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

class App extends Component {

  onChange = (items) => {
    console.log('items',items)
  }

  render() {
    const requestProps = {
      appCode: 'cr_distribution',
      apiCode: 'distribution_item_authorized_items_search',
      params: {},
      propertyName: 'skuId',
      propertySelect:'select',
    }

    const dialogProps = {
      title:'添加商品',
      width: '600px',
    }

    const formProps = {
      selectEls: [
        {label:'商品sku',value: 1},
        {label:'商品名称',value: 2},
      ],
      selectDefaultValue: 1,
      inputDefaultValue: '234',
      placeholder:"请输入内容",
      isPreview: false,
      disabled: false,
      state:'',
      hidden: false,
    }

    return ( <CommoditySelector onChange={this.onChange} {...requestProps} {...formProps} {...dialogProps} />);
  }
}

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