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 (
{row.productid} - {row.productname}
￥ {row.unitprice}
)
}
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(
style={{width:"300px",fontFamily:"楷体",height:"30px"}}>
this.setState({listtime:listtime})
}else{
this.setState({listtime:[]});
}
},100);
});
}
}
datetimeChange(value){
this.setState({datetime: value});
}
render() {
return (
<DataList
style={{ width: "100%", height: "100%" ,textAlign:"center"}}
renderItem={this.renderItem.bind(this)}
data={this.state.data}
selectionMode="single"
onSelectionChange={this.handleSelectionChange.bind(this)}
/>
<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'}}>
style={{position:'absolute', top:'70px', left:'85px', width:200}}>
{
this.state.topic.map(topic => {
return (
)
})
}
{
this.state.onlist.map(onlist => {
return (
<RadioButton
inputId={onlist}
value={onlist}
groupValue={this.state.onlists}
onChange={(checked) => this.handleChangelist(onlist, checked)}
/>
)
})
}
{this.state.listtime}
);
}
}
做了个选中才出现的信息框，开始做有异步，点击“上市”不出现“上市时间”，点击“未上市”才出现，后来还是用setTimeout()做的，如果有更好的方法可以指点指点的。
handleChangelist(value, checked) {
if (checked) {
this.setState({ onlists: value },() => {
setTimeout(()=>{
if(this.state.onlists=="上市"){
var listtime=[];
listtime.push(
style={{width:"300px",fontFamily:"楷体",height:"30px"}}>
this.setState({listtime:listtime})
}else{
this.setState({listtime:[]});
}
},100);
});
}
}
手机扫一扫
移动阅读更方便
你可能感兴趣的文章