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

B 端物料组件库

---
title: Inner Form
order: 3
---

本 Demo 演示商品展示的用法。

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

const { InnerForm } = CommoditySelector;

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 formProps = {
      selectEls: [
        {label:'商品sku',value: 1},
        {label:'商品名称',value: 2},
      ],
      selectDefaultValue: 1,
      inputDefaultValue: '234',
      placeholder:'请输入内容',
      isPreview: false,
      disabled: false,
      state:'',
      hidden: false,
    }

    const value = [{
        id: 1,     // required
        itemName: '飞鹤奶粉de',
        skuTitle: '规格:200ml;',
        skuCode: '148274132438921217',
        imageUrl: 'https://sc02.alicdn.com/kf/HTB1efnNLVXXXXbtXpXXq6xXFXXXNLight-100-acrylic-fashionabe-snood-shawl-weight.jpg_220x220.jpg',
        quantity: 12,
    }]


    return (<InnerForm onChange={this.onChange} {...requestProps} {...formProps} value={value}/>);
  }
}

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