效果图:

 
 
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);
     
    });
   
  }

}

 
 

react.js+easyui 做一个简单的商品表的更多相关文章

  1. 使用React并做一个简单的to-do-list

    1. 前言 说到React,我从一年之前就开始试着了解并且看了相关的入门教程,而且还买过一本<React:引领未来的用户界面开发框架 >拜读.React的轻量组件化的思想及其virtual ...

  2. 【 D3.js 入门系列 --- 3 】 做一个简单的图表!

    前面说了几节,都是对文字进行处理,这一节中将用 D3.js 做一个简单的柱形图. 做柱形图有很多种方法,比如用 HTML 的 div 标签,或用 svg . 推荐用 SVG 来做各种图形.SVG 意为 ...

  3. 【 D3.js 入门系列 — 3 】 做一个简单的图表!

    图1. 柱形图 1. 柱形图 前几章的例子,都是对文字进行处理.本章中将用 D3 做一个简单的柱形图.制作柱形图有很多种方法,比如用 HTML 的 <div> 标签,或在 SVG 上绘制 ...

  4. MUI框架-05-用MUI做一个简单App

    MUI框架-05-用MUI做一个简单App MUI 是一个前端框架,前端框架就像 Bootstrap,EasyUI,Vue ,为了做 app 呢,就有了更加高效的 MUI,我觉得前端框架有很多,也没有 ...

  5. 使用 jquery 的 上传文件插件 uploadify 3.1 配合 java 来做一个简单的文件上次功能。并且在界面上有radio 的选择内容也要上传

    使用 jquery 的 上传文件插件 uploadify 3.1 配合 java 来做一个简单的文件上次功能.并且在界面上有radio 的选择内容也要上传 uploadify 插件的 下载和文档地址  ...

  6. 第四章 .net core做一个简单的登录

    项目目标部署环境:CentOS 7+ 项目技术点:.netcore2.0 + Autofac +webAPI + NHibernate5.1 + mysql5.6 + nginx 开源地址:https ...

  7. .Net Core 3.0后台使用httpclient请求网络网页和图片_使用Core3.0做一个简单的代理服务器

    目标:使用.net core最新的3.0版本,借助httpclient和本机的host域名代理,实现网络请求转发和内容获取,最终显示到目标客户端! 背景:本人在core领域是个新手,对core的使用不 ...

  8. 【Bugly干货分享】一起用 HTML5 Canvas 做一个简单又骚气的粒子引擎

    Bugly 技术干货系列内容主要涉及移动开发方向,是由Bugly邀请腾讯内部各位技术大咖,通过日常工作经验的总结以及感悟撰写而成,内容均属原创,转载请标明出处. 前言 好吧,说是“粒子引擎”还是大言不 ...

  9. 一起用HTML5 canvas做一个简单又骚气的粒子引擎

    前言 好吧,说是"粒子引擎"还是大言不惭而标题党了,离真正的粒子引擎还有点远.废话少说,先看demo 本文将教会你做一个简单的canvas粒子制造器(下称引擎). 世界观 这个简单 ...

随机推荐

  1. Mybatis 缓存原理

    Mybatis 缓存原理 本文来自拉钩 java 高薪训练营,如果文章写的不好,看不懂可以找我要课程视频,不收费. 只愿在编程道路上,寻求志同道合的码友.v:15774135883 1 Mybatis ...

  2. Scala中使用 Jackson API 进行JSON序列化和反序列化

    1.  什么是 Json 序列化 和 反序列化 序列化 => 将 Java对象 转换成 json字符串反序列化 => 将 json字符串 转换成 Java对象 2. 依赖包 说明 < ...

  3. BZOJ1176 [Balkan2007]Mokia(CDQ)

    CDQ裸题,\(x\), \(y\), \(tim\)三维偏序 #include <cstdio> #include <iostream> #include <cstri ...

  4. 云服务器上搭建cobalt strike遇到的一些小问题

    一.前言: 当你兴高采烈的买了一台云服务器,迫不及待地想去搭建传说中的神器cobalt strike的时候,你可能会遇到以下的一些小问题,这里我会列出对应的解决方法. 二.遇到的一些小问题 1.上传文 ...

  5. rh358 001 Linux网络与systemd设置

    358 rhel7 ce ansible 部署服务 dhcp nginx vanish haproxy 打印机服务 服务管理自动化 systemd与systemctl systemctl 来管理sys ...

  6. MPI学习笔记(三):矩阵相乘的分块并行(行列划分法)

    mpi矩阵乘法:C=αAB+βC 一.主从模式的行列划分并行法 1.实现方法 将可用于计算的进程数comm_sz分解为a*b,然后将矩阵A全体行划分为a个部分,将矩阵B全体列划分为b个部分,从而将整个 ...

  7. ansible 003 常用模块

    常用模块 file 模块 管理被控端文件 回显为绿色则,未变更,符合要求 黄色则改变 红色则报错 因为默认值为file,那么文件不存在,报错 改为touch则创建 将state改为directory变 ...

  8. Mac隔空投送功能

    使用mac 或iphone 的隔空投送功能可以互发文件,亲测可用 具体可以看mac的文档 需要注意的是: 如果是mac传iphone,iphone会显示你需要存储文件的地方,比如选择在文稿中.然后在文 ...

  9. 【读书笔记】C#高级编程 第五章 泛型

    (一)泛型概述 泛型不仅是C#编程语言的一部分,而且与程序集中的IL代码紧密地集成.泛型不仅是C#语言的一种结构,而且是CLR定义的.有了泛型就可以创建独立于被包含类型的类和方法了. 1.性能 泛型的 ...

  10. 一文搞懂mysql索引底层逻辑,干货满满!

    一.什么是索引 在mysql中,索引是一种特殊的数据库结构,由数据表中的一列或多列组合而成,可以用来快速查询数据表中有某一特定值的记录.通过索引,查询数据时不用读完记录的所有信息,而只是查询索引列即可 ...