price menu for react

install

npm install --save-dev price-menu-react hyper-input-react number-input-react pull-selector-react style-loader css-loader

webpack.config.js

// add loader
{
    test: /\.css$/,
    loader: "style-loader!css-loader"
}

import

import PriceMenu from 'price_menu'

use

//依赖数据源存在, 否则不渲染, 内部深拷贝一份数据处理
getPriceMenu() {
    if(this.state.listData) return (
        <PriceMenu
            headerItems={this.priceHeaderItems}
            closeClick={this.closeClick.bind(this)}
            initialData={this.state.listData}
            submitPriceMenu={this.submitPriceMenu.bind(this)}/>
    )
}

// JSX
<div className='container-price-menu-back'>
    <div className='container-price-menu'>
        {this.getPriceMenu()}
    </div>
</div>

headerItems: headerItems, optional

['序号', '零件名称', '零件号', '类型', '数量', '单价']

closeClick: closeClick, setInitial data to null

closeClick() {
    this.setState({listData: null})
}

submitPriceMenu: submit, bring price menu

submitPriceMenu(priceMenu) {
    console.log(priceMenu)
    console.log(JSON.stringify(priceMenu))
}

initialData: initialData, once

{
    "code": 1,
    "total_type": 3,
    "total_quantity": 6,
    "title": "宝马－320d-E93(2007-2010)",
    "total_money": 28779.4,
    "data": [
        {
            "num": 1,
            "pname": "保修柴油微粒过滤器1",
            "pid": "1830002211",
            "factory_type": "原厂件",
            "quantity": 1,
            "price": 14389.1,
            "brand": "bmw",
        },
        {
            "num": 2,
            "pname": "保修柴油微粒过滤器2",
            "pid": "1830002212",
            "factory_type": "品牌件",
            "quantity": 2,
            "price": 14389.2,
            "brand": "bmw",
        },
        {
            "num": 3,
            "pname": "保修柴油微粒过滤器3",
            "pid": "1830002213",
            "factory_type": "适用件",
            "quantity": 3,
            "price": 14389.3,
            "brand": "bmw",
        }
    ],
    "contact":{
        "company": "云汽配配",
        "contact_person": "zwei",
        "contact_tel": "15688888888"
    },
    "msg": "",
}