效果图:

 
 
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. Windows Embedded CE 6.0开发环境的搭建(2)

    最近开始在学习嵌入式,在这里首先得安装Windows Embedded CE 6.0,其中遇到了很多问题,电脑的系统以及相关配置都会在安装过程中受到影响,因此笔者就安装中的问题以及环境搭建来介绍一下. ...

  2. 飞书前端提到的竞态问题,在 Android 上怎么解决?

    请点赞关注,你的支持对我意义重大. Hi,我是小彭.本文已收录到 GitHub · AndroidFamily 中.这里有 Android 进阶成长知识体系,有志同道合的朋友,关注公众号 [彭旭锐] ...

  3. 让 DolphinScheduler 1.3.4 开启 Netty 日志打印,解决流程实例一直在运行中的问题

    关于新一代大数据任务调度 - Apache DolphinScheduler   Apache DolphinScheduler(incubator) 于 17 年在易观数科立项, 19 年 8 月进 ...

  4. java数组---概念

    1.数组的定义 数组是相同类型数据的有序集合.数组描述的是相同类型的若干个数据,按照一定的先后次序排列组合而成.其中,每一个数据称作一个数组元素,每个数组元素可以通过一个下标来访问它们. 2.数组的建 ...

  5. 【java】学习路线11-四种权限修饰的测试

    package com.remoo.test;public class Learn09_Test{    private static String welcomeWord1 = "你好,p ...

  6. Dubbo源码(九) - 服务调用过程

    1. 前言 本文基于Dubbo2.6.x版本,中文注释版源码已上传github:xiaoguyu/dubbo 源码分析均基于官方Demo,路径:dubbo/dubbo-demo 如果没有看过之前Dub ...

  7. Linux虚拟机报错grub rescue解决步骤

    /boot 分区内核文件丢失 实验准备 1) 准备:rm -rf /boot/* 2) 系统启动报错截图 修复步骤 重启显示logo时 按 Esc,选择从光驱启动 或者关机再选择打开电源时进入固件 移 ...

  8. 【ASP.NET Core】在Blazor中获取 HTTP 上下文信息

    今天咱们来扯一下 Blazor 应用程序怎么访问 HttpContext.其实这句话有坑,为了避免大伙伴们掉茅坑,老周直接说明:Blazor 是不能访问 HttpContext 的.哪怕你在服务容器中 ...

  9. spark 解决 java.util.Date is not a valid external type for schema of Date

    出错伪代码如下: //出错的点在这里 import java.util.Date ... val t_rdd = t_frame.rdd.map(row => { val photo_url = ...

  10. InnoDB_锁总结

    1. 查询会对资源添加共享锁 加了共享锁的资源不可以被修改:但可以被查询(也是会在资源上再加共享锁) 2. 数据修改会对资源添加排他锁 加了排他锁的资源只能被持有这个排他锁的事务读取和修改,其他事务读 ...