react.js+easyui 做一个简单的商品表
效果图：
import React from 'react';
import { Form, FormField, Layout,DataList,LayoutPanel,Panel, Label, CheckBox, TextBox,Tabs,TabPanel, DateBox, NumberBox, RadioButton, ComboBox, LinkButton } from 'rc-easyui';
import '../css/style.css';
import * as demo from 'rc-easyui/dist/locale/easyui-lang-zh_CN.js';
import { reqdoSQL } from '../../api/functions.js';
import 'rc-easyui/dist/themes/gray/radiobutton.css';
import 'rc-easyui/dist/themes/gray/checkbox.css';
export default class Page401 extends React.Component {
constructor(props) {
super(props);
this.state = {
product:{},
data:[],
topic:["饮料","零食","速食产品","母婴用品","鞋包饰品","厨房日用品"],
topicchecked:[],
onlist:["上市","未上市"],
onlists:"",
datetime:new Date(),
listtime:[]
}
}
getImage(row) {
return "/myServer/mybase/products/"+row.productid+".jpg";
}
async componentDidMount() {
let p={};
p.selectsql='select productid,productname,unitprice from products';
let rs= await reqdoSQL(p);
this.setState({data:rs.rows});
}
renderItem({ row }) {
return (
<div key={row.productid}>
<img src={this.getImage(row)} style={{width:"100px",height:"100px"}} />
<div>
<p>{row.productid} - {row.productname}</p>
<p>￥ {row.unitprice}</p>
</div>
</div>
)
}
handleChange(name, value) { //同一个函数，用name来区分
let product = Object.assign({}, this.state.product);
product[name] = value;
this.setState({product: product,open:false });
console.log(name,value);
}
handleSelectionChange(row){
this.setState({product:row})
console.log(111111,row);
}
handleChangelist(value, checked) {
if (checked) {
this.setState({ onlists: value },() => {
setTimeout(()=>{
if(this.state.onlists=="上市"){
var listtime=[];
listtime.push(<div style={{ margin: '10px'}}>
<Label htmlFor="onlisttime" align="left">上市时间:</Label>
<DateBox inputId="onlisttime" id="onlisttime" value={this.state.datetime} onChange={(value) => this.datetimeChange(value)} format="yyyy-MM-dd"
style={{width:"300px",fontFamily:"楷体",height:"30px"}}></DateBox>
</div>);
this.setState({listtime:listtime})
}else{
this.setState({listtime:[]});
}
},100);
});
}
}
datetimeChange(value){
this.setState({datetime: value});
}
render() {
return (
<div>
<Layout style={{width:"100%",height:"100%",position:"absolute"}}>
<LayoutPanel region="west" style={{width:200}}>
<div>
<DataList
style={{ width: "100%", height: "100%" ,textAlign:"center"}}
renderItem={this.renderItem.bind(this)}
data={this.state.data}
selectionMode="single"
onSelectionChange={this.handleSelectionChange.bind(this)}
/>
</div>
</LayoutPanel>
<LayoutPanel region="center" >
<Panel title="商品信息" collapsible >
<div style={{position:'relative', height:120}} >
<Label htmlFor="productid" className="labelStyle" style={{position:'absolute', top:'20px', left:'16px'}}>商品编号:</Label>
<TextBox inputId="productid" id="productid" value={this.state.product.productid}
onChange={(value) => this.handleChange("pid", value)}
style={{position:'absolute', top:'20px', left:'85px', width:'200px'}}></TextBox>
<Label htmlFor="productname" className="labelStyle" style={{position:'absolute', top:70, left:'16px'}}>商品名称:</Label>
<TextBox inputId="productname" id="productname" value={this.state.product.productname} onChange={(value) => this.handleChange("productname", value)}
style={{position:'absolute', top:'70px', left:'85px', width:200}}></TextBox>
</div>
</Panel>
<div>
<Tabs tabPosition='top' >
<TabPanel ref={ref => this.myTab1 = ref} key="myTab1" title="客户列表">
<div style={{margin:"10px"}}>
<Label htmlFor="customerid" align="left">客户编码:</Label>
<TextBox inputId="customerid" iconCls="icon-man" style={{ width: '30%' }}></TextBox>
</div>
<div style={{margin:"10px"}}>
<Label htmlFor="companyname" align="left">公司名称:</Label>
<TextBox inputId="companyname" iconCls="icon-man" style={{ width: '30%' }}></TextBox>
</div>
<div style={{margin:"10px"}}>
<Label htmlFor="companyname" align="left">售货类型:</Label>
{
this.state.topic.map(topic => {
return (
<div key={topic} style={{display:"inline-block"}}>
<CheckBox inputId={topic} multiple value={topic} values={this.state.topicchecked} onChange={this.handleChange.bind(this)}></CheckBox>
<Label htmlFor={topic} style={{margin:'0px 0px 0px 5px'}}>{topic}</Label>
</div>
)
})
}
</div>
<div style={{margin:"10px"}}>
<Label htmlFor="onlist" align="left">公司类型:</Label>
{
this.state.onlist.map(onlist => {
return (
<div key={onlist} style={{display:"inline-block"}}>
<RadioButton
inputId={onlist}
value={onlist}
groupValue={this.state.onlists}
onChange={(checked) => this.handleChangelist(onlist, checked)}
/>
<Label htmlFor={onlist} style={{ margin: '0 5px' }}>{onlist}</Label>
</div>
)
})
}
</div>
{this.state.listtime}
<div style={{ margin: '10px' }}>
<Label htmlFor="note" align="left">公司简历:</Label>
<TextBox inputId="note" multiline value={this.state.description} style={{ width: '70%', height: 100 }}></TextBox>
</div>
</TabPanel>
</Tabs>
</div>
</LayoutPanel>
</Layout>
</div>
);
}
}
做了个选中才出现的信息框，开始做有异步，点击“上市”不出现“上市时间”，点击“未上市”才出现，后来还是用setTimeout()做的，如果有更好的方法可以指点指点的。
handleChangelist(value, checked) {
if (checked) {
this.setState({ onlists: value },() => {
setTimeout(()=>{
if(this.state.onlists=="上市"){
var listtime=[];
listtime.push(<div style={{ margin: '10px'}}>
<Label htmlFor="onlisttime" align="left">上市时间:</Label>
<DateBox inputId="onlisttime" id="onlisttime" value={this.state.datetime} onChange={(value) => this.datetimeChange(value)} format="yyyy-MM-dd"
style={{width:"300px",fontFamily:"楷体",height:"30px"}}></DateBox>
</div>);
this.setState({listtime:listtime})
}else{
this.setState({listtime:[]});
}
},100);
});
}
}
