简单的react示例 | 易学教程

自留

index.html

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<title>Hello React!</title>
<script src="https://cdn.staticfile.org/react/16.4.0/umd/react.development.js"></script>
<script src="https://cdn.staticfile.org/react-dom/16.4.0/umd/react-dom.development.js"></script>
<script src="https://cdn.staticfile.org/babel-standalone/6.26.0/babel.min.js"></script>

<script type="text/babel" src="patient.jsx"></script>
<script type="text/babel" src="page.jsx"></script>

</head>

<body>

<div id="example"></div>
<script type="text/babel">
ReactDOM.render(
           <Page />,
           document.getElementById('example')
       );
</script>

</body>
</html>

page.jsx

class Page extends React.Component {
   constructor(props) {
       super(props);
       this.state = {patient : []}
   }
   //检索事件
   searchClick(){
       //console.log('链接被点击');
       this.setState({
       staff: new PATIENT
       });

   }
   render() {
       return (
           <div className="" name="" width="100%">
               <div width="100%" height="100%" gap="0">
                   <div width="100%">
                       <label text="查询条件" fontWeight="bold">查询条件</label>
                   </div>

                   <div height="10px">
    <button id="searchBtn" onClick={this.searchClick.bind(this)} width="100px" height="24px" >查询</button>
                    </div>

                   <div width="100%">
                       <label text="查询結果" fontWeight="bold">查询結果</label>
                   </div>
                   <div height="5px"></div>
                   <div width="100%" height="100%">
                       <TablePage items={this.state.staff} />
                   </div>
               </div>

           </div>
       );
   }
}


class TablePage extends React.Component{
constructor(props) {
       super(props);
   }

   render(){
   let items = [];

       if(this.props.items.length == 0) {
       for(let i = 0; i < 40; i++){
           items.push(<TableEmptyContent />);
       }
       }else {
       this.props.items.staff.forEach(item => {
           items.push(<TableContent key={item.key} item={item} />);
       });
       }

       return (
           <table id="dGrid0" width="100%" height="100%" >
               <thead>
                   <tr>
                       <td width="35px" backgroundColor="#e6e6fa" textAlign="center">序号</td>
                       <td width="130px" >角色</td>
                       <td width="130px" >身份ID</td>
                       <td width="180px" >姓名</td>
                       <td width="95px" >出生年月</td>
                       <td width="55px" >性別</td>
                       <td width="160px" >电话</td>
                       <td width="120px" >Email</td>
                       <td >备注</td>
                   </tr>
               </thead>
               <tbody>{items}</tbody>
           </table>
       );
   }
}

class TableEmptyContent extends React.Component {

   render() {
       return (
           <tr
               style={{'cursor': 'pointer'}}
           >
               <td className='itemTd'></td>
               <td className='itemTd'></td>
               <td className='itemTd'></td>
               <td className='itemTd'></td>
               <td className='itemTd'></td>
               <td className='itemTd'></td>
               <td className='itemTd'></td>
               <td className='itemTd'></td>
               <td className='itemTd'></td>
           </tr>
       );
   }
}

class TableContent extends React.Component {
   constructor(props) {
       super(props);
       this.state = {showWarning: true}
   }

   //delete
   handlerDelete(evt){
   this.props.removeStaffItem(this.props.item.key);
   }

   //detail
   handlerDetail(evt){
   this.props.detailStaffItem(this.props.item.key);
   }

   dClickHandler(evt){
   //console.log('链接被点击');
   dClickHandler(this.props.item.info);
   }

   render() {
       return (
           <tr
               style={{'cursor': 'pointer'}} onDoubleClick={this.dClickHandler.bind(this)}
           >
               <td className='itemTd'>{this.props.item.key}</td>
               <td className='itemTd'>{this.props.item.info.ptnt_no}</td>
               <td className='itemTd'>{this.props.item.info.ptnt_local_no}</td>
               <td className='itemTd'>{this.props.item.info.ptnt_kname}</td>
               <td className='itemTd'>{this.props.item.info.ptnt_birthdate}</td>
               <td className='itemTd'>{this.props.item.info.ptnt_sex}</td>
               <td className='itemTd'>{this.props.item.info.project_name_list}</td>
               <td className='itemTd'>{this.props.item.info.upload_info}</td>
               <td className='itemTd'>{this.props.item.info.ptnt_remarks}</td>
           </tr>
       );
   }
}

patient.jsx

class staffItem extends React.Component {
constructor(item){
   super();
   this.info = {};
   this.info.ptnt_no = item.ptnt_no;
   this.info.ptnt_name = item.ptnt_name;
   this.info.ptnt_kname = item.ptnt_kname;
   this.info.ptnt_birthdate = item.ptnt_birthdate;
   this.info.ptnt_remarks = item.ptnt_remarks;
       this.info.project_name_list = item.project_name_list;
       this.info.ptnt_sex = item.ptnt_sex;

       this.info.ptnt_facility_code = item.ptnt_facility_code;
       this.info.ptnt_local_no = item.ptnt_local_no;
       this.info.upload_dt = item.upload_dt;
       this.info.upload_expiry_dt = item.upload_expiry_dt;
       this.info.upload_info = item.upload_info;
       this.info.upload_yn = item.upload_yn;

       this.key = ++staffItem.key;
   }
}
staffItem.key = 0;

class PATIENT extends React.Component {

constructor(){
       super();
   this.allStaff = [];
   PATIENT .rawData.forEach(item => {
      this.allStaff.push(new staffItem(item));
   });
       this.staff = this.allStaff;
   }
}

PATIENT .rawData =[]//

来源：oschina

链接：https://my.oschina.net/u/4555557/blog/4348398

标签

babel

jsx

Remarks

javascript

bind

react