前端004/React常用UI组件

每天进步一点点〜

Ant Design of React //蚂蚁金服设计平台。需要应用何种类型组件可参考API

React + mobx + nornj 开发模式文件说明：

【1】。A.t.html （.html / .scss / .js  /  文件包路径：src/web/pages）

-->html代码 （页面设计，各种标签。标签有哪些属性及用法参考“Ant Design of React”） /

【2】。A.m.scss

-->样式 (页面显示样式统一管理)  /

【3】。A.js

--> javascript代码，事件操作。  /

【4】。AStore.js  (src/stores/pages包下面)

-->路由页面 （用于与后端交互，获取数据，并将数据返回给A.js，render渲染到页面）/

（一）。Modal对话框：

项目需求：注册一个用户，当用户点击“注册”按钮时，会将之前注册的数据替换掉。因此，需要提示两次，以警示用户“确定要注册！”

该代码实现：较验文本数据必填 & 正则 |  比较密码输入是否一致 | 弹出提示框

实现代码/html ：

 <!--注册用户-->
 <template name="registUser">
   <ant-Modal width={} visible="{certificateregistList.showRegistUser}" footer={null} onCancel={onAddModalCancel}>
     <ant-Tabs>
       <ant-TabPane tab="注册用户" />
     </ant-Tabs>
     <fj-Row class="{styles.btn}">
       <fj-Col offset=""  l="" >
         <ant-Form  onSubmit={handleRegister}>
           <ant-FormItem  label="用户名"   {...formItemParams()}>
             <#userID>
               <ant-input class="{styles.input}" placeholder="请输入用户名！"/>
             </#userID>
           </ant-FormItem>
           <ant-FormItem  label="密码"   {...formItemParams()}>
             <#userPwd>
               <ant-input type="password" class="{styles.input}" placeholder="请输入用户密码！"/>
             </#userPwd>
           </ant-FormItem>
           <ant-FormItem  label="确认密码"   {...formItemParams()}>
             <#userConfirmPwd>
               <ant-input type="password" class="{styles.input}" placeholder="请再次输入密码！"/>
             </#userConfirmPwd>
           </ant-FormItem>
           <ant-FormItem  label="最大次数"   {...formItemParams()}>
             <#maxNum>
               <ant-input class="{styles.input}" placeholder="可以重复申请的最大次数！"/>
             </#maxNum>
           </ant-FormItem>
           <div class="{styles.deploy_button}">
             <ant-Button style="margin-left:168px;" type="primary" class="btn" htmlType="submit" disabled="{certificateregistList.showRegistBtn}">注册</ant-Button>
           </div>
         </ant-Form>
       </fj-Col>
     </fj-Row>
   </ant-Modal>
 </template>

实现代码/js :

 //注册用户
 @registerTmpl('RegistUser')
 @inject('store')
 @Form.create()
 @observer
 export class RegistUser extends Component{
     // 用户名
     userID(options) {
         return this.props.form.getFieldDecorator('userID', {
             rules: [{ required: true, message: '请填写用户名！' }],
         })(options.result());
     }

     // 用户密码
     userPwd(options) {
         return this.props.form.getFieldDecorator('userPwd', {
             rules: [{ required: true, message: '请填写用户密码！' },
                     {pattern:/^[a-zA-Z]\w{,}$/,message: '密码只能以字母开头，长度在6~20，只能包含字母、数字和下划线！' },],
         })(options.result());
     }

     // 重复用户密码
     userConfirmPwd(options) {
         return this.props.form.getFieldDecorator('userConfirmPwd', {
             rules: [{ required: true, message: '请确认用户密码！' },
                     {pattern:/^[a-zA-Z]\w{,}$/,message: '密码只能以字母开头，长度在6~20，只能包含字母、数字和下划线！' },
                     {validator: this.verifyPassword,}],
         })(options.result());
     }

     //重复申请证书的最大次数
     maxNum(options){
         return this.props.form.getFieldDecorator('maxNum', {
         rules: [{ required: true, message: '请填写申请证书最大次数！' },
                 {pattern:/^([-]|)$/,message: '请输入>0且<=10的正整数数字！' }],
         })(options.result());
     }

     //较验两次输入密码是否一致
     verifyPassword = (rule, value, callback) => {
         const form = this.props.form;
         if (value && value !== form.getFieldValue('userPwd')) {
           callback('两次输入密码不一致!');
         } else {
           callback();
         }
     }

     //取消【遮罩】
     @autobind
     onAddModalCancel() {
         this.props.store.certificateregistList.setShowRegistUser(false);
     }

     //注册提交
     @autobind
     handleRegister(e){
         const { store: { certificateregistList } } = this.props;
         e.preventDefault(); //阻止未填项
         this.props.form.validateFields((err, values) => {
             if (!err) {
                 var attrs=[{
                     "Name":"hf.Revoker",
                     "Value":"true",
                 }]

                 let param={
                     "ID":  values.userID,
                     "Type": "user", //用户类型，要求固定值为user
                 }

                 //弹出框警告提示
                 Modal.confirm({
                     title: '注册后，已有用户将会被覆盖!!!',
                     content: '',
                     onOk() {  //确认后再提示。。
                         Modal.confirm({
                             title: '确认注册新用户!!!',
                             content: '已有用户将会被覆盖...',
                             onOk() {  //确认后注册
                                 const closeLoading = Message.loading('正在保存数据...', );
                                 certificateregistList.setShowRegistBtn(true); //控制注册按钮显示
                                 Promise.all([
                                     certificateregistList.getRegister(param), //注册用户
                                 ]).then(()=> {
                                     certificateregistList.setShowRegistBtn(false);
                                     closeLoading();
                                 });
                             },
                             onCancel() {},
                         });
                     },
                     onCancel() {},
                 });
             }
         });
     }

     render() {
         const { store: { certificateregistList } } = this.props;
         return tmpls.registUser(this.props, this, {
             styles,
             certificateregistList,
         });
     }
 } 

（二）。Tag标签：

业务需求：数据动态加载，每行后追加一个Tag标签，点击Tag标签后，对应显示文本框，可以录入值并将值进行显示。。。

效果：

代码如下所示：

【1】。html

 <template name="storageExpand">
   <ant-Form onSubmit={handleSubmit} layout="vertical">
   <p><b>存储名称：</b>{xx.xx.name}</p>
   <#each {{nodeList}}>
     <p>
       <b>Node{{@index | +()}}：</b><br/>
         <#each {{xx}}>
           {{this}}，
         </#each>
         </b>&nbsp;&nbsp;IP：
         <#each {{xx}}>
           {{this}}，
         </#each>
         </b>&nbsp;&nbsp;设备：
         <#each {{xx}}>
           {{this}}，
         </#each>

         <!--tag标签值-->
         <#each {{tags}}>
           <#if {{isLongTag}}>
             <ant-Tooltip title={@item} key={@item}>
               {tagItem(@item,@index)}
             </ant-Tooltip>
             <#else>
               {tagItem(@item,@index)}
             </#else>
           </#if>
         </#each>

         <!--控制显示tag标签还是文本框，初始显示tag标签-->
         <#if {{inputVisible}}>
             {inputItem(@index)}
           <#else>
             {addItem(@index)}
           </#else>
         </#if>
     </p>
   </#each>
   <p><b>存储：</b>{xx || "空"}</p>
   <p><b>Master：</b>{{xx ? ('是', '否') }}</p>
   <div class="{styles.btnArea}">
       <ant-Button class="{styles.btn}" type="primary" htmlType="submit" disabled="{showExpand}">扩容</ant-Button>
   </div>
   </ant-Form>
 </template>

【2】。js

 import React, { Component } from 'react';
 import { findDOMNode } from 'react-dom';
 import { observable, computed, toJS } from 'mobx';
 import { observer, inject } from 'mobx-react';
 import nj from 'nornj';
 import { registerTmpl } from 'nornj-react';
 import { autobind } from 'core-decorators';
 import Input from 'flarej/lib/components/antd/input';
 import Icon from 'flarej/lib/components/antd/icon';
 import Tag from 'flarej/lib/components/antd/tag';
 import Message from 'flarej/lib/components/antd/message';
 import Form from 'flarej/lib/components/antd/form';
 import Notification from '../../../utils/notification';
 import styles from './storageManager.m.scss';
 import tmpls from './storageManager.t.html';

 //存储扩容功能
 @registerTmpl('StorageExpand')
 @inject('store')
 @Form.create()
 @observer
 export default class StorageExpand extends Component{
   @observable nodeList=[]; //获取设备信息，组成新数组对象。
   @observable obj = {
     inputVisible: false,
     tags: [],
   }
   @observable inputVisible=false; //控制显示tag标签 OR 文本框
   @observable inputValue='';   //文本框输入值
   @observable isLongTag = false; //是否是长字符，控制是否显示Tooltip
   @observable showExpand=false;  //控制显示【扩容】按钮

   componentWillMount() {
     const { store: { storageManager } } = this.props;
     this.nodeList = storageManager && storageManager.xx && storageManager.xx.xx;
     this.nodeList = this.nodeList.map((value, key)=>{
       return value = {...value, ...this.obj};
     });
   }

   componentDidUpdate() {

   }

   //当inputVisible=false时，显示tag标签.(即初始进入显示tag标签)
   addItem = (index) => (
     <Tag
       onClick={()=>this.showInput(index)}><Icon type="plus" />添加
     </Tag>
   )

   //点击tag标签，添加时，显示文本框。
   showInput = (index) => {
     this.nodeList[index].inputVisible=true;
   }

   //点击tag标签，显示文本框供用户录入数据
   inputItem = (index) => (
     <Input
         type="text"
         size="small"
         style={{"width": }}
         value={this.inputValue}
         onChange={this.handleInputChange}
         onBlur={()=>this.handleInputConfirm(index)}
         onPressEnter={()=>this.handleInputConfirm(index)}
     />
   )

   handleInputChange = (e) => {
     this.inputValue=e.target.value;
     this.isLongTag = this.inputValue.length >=  ? true : false;
   }

   handleInputConfirm = (index) => {
     const inputValues = this.inputValue;
     let newTags = this.nodeList[index].tags ? [...this.nodeList[index].tags] : []
     if (inputValues && newTags.indexOf(inputValues) === -) {
       newTags = [...newTags, inputValues];
     }
     this.nodeList[index].tags=newTags;
     this.inputValue='';
     this.nodeList[index].inputVisible=false;
   }

   //文本框失去焦点后，将值赋给tag标签，用于在页面显示。
   tagItem = (tag, index) => {
     return (
       <Tag
         key = {tag}
         closable = {index !== -}
         afterClose = {() => this.handleClose(tag, index)}
       >
         {this.isLongTag ? `${tag.slice(, )}...` : tag}
       </Tag>
     )
   };

   //移出添加的标签内容
   handleClose = (removedTag, index) => {
     const newTags = this.nodeList[index].tags.filter(tag => tag !== removedTag);
     this.nodeList[index].tags=newTags;
   }

   //扩容触发事件
   @autobind
   handleSubmit(e){
     const { store: { storageManager } } = this.props;
     e.preventDefault();
     var storageContent=[];
     this.nodeList.map((value, key)=>{
       var option = {
         "manage":[],
         "storage":[],
         "devices":[],
         "zone":
       };
       option.manage.push(this.nodeList[key].manage[]);    //节点名
       option.storage.push(this.nodeList[key].storage[]);  //IP
       option.devices.push(this.nodeList[key].devices[]);
       for(let i=;i<this.nodeList[key].tags.length;i++){
         option.devices.push(this.nodeList[key].tags[i]);  //设备-新添加
       }
       storageContent.push(option);
     });
     let param={
       "xx":xx
     };
     this.showExpand=true; //控制按钮不可用
     const closeLoading = Message.loading('正在保存数据...', );
     Promise.all([
       storageManager.getSaveStorage(param), //保存数据
     ]).then(() => {
       this.showExpand=false;
       closeLoading();
     });
   }

   render() {
     const { store: { storageManager } } = this.props;
     return tmpls.storageExpand(this.state, this.props, this, {
       styles,
       storageManager,
     });
   }
 }