weui+react实践

作者: gzheyunying 日期: 2016-04-25

169882

继上个月使用weui以后，我把react和weui结合起来做了一个表单，对输入的内容进行检验，检验内容有姓名、学号、手机号。

引用的文件如下，均为weui或react的文件：

<link rel="stylesheet" href="css/weui.css"/>
<link rel="stylesheet" href="css/example.css"/>
<script src="js/react.js"></script>
<script src="js/react-dom.js"></script>
<script src="js/browser.min.js"></script>

核心代码如下：

<body ontouchstart>
 <div id="container">
 </div>
 
<script type="text/babel">
  var MyForm = React.createClass({
    getInitialState: function() {
      return {
      };
    },
    handleNumber: function(e) {
      var value = e.target.value;
      var error = '';
      if(!(/[0-9]{12}/.test(value))) {
        error = 'weui_cell_warn';
      }
      this.setState({
        number: value,
        numberError: error
      });
    },
    handleName: function(e) {
      var value = e.target.value;
      var error = '';
      if(value.length < 2) {
        error = 'weui_cell_warn';
      }
      this.setState({
        name: value,
        nameError: error
      });
    },
    handlePhone: function(e) {
      var value = e.target.value;
      var error = '';
      if(!(/^1[3|4|5|8]\d{9}$/.test(value))) {
        error = 'weui_cell_warn';
      }
      this.setState({
        phone: value,
        phoneError: error
      });
    },
    handleName2: function(e) {
      var value = e.target.value;
      var error = '';
      if(value.length < 2) {
        error = 'weui_cell_warn';
      }
      this.setState({
        name2: value,
        name2Error: error
      });
    },
    render: function() {
      return (
<div>
        <div className="weui_cells_title">检获卡信息</div>
        <div className="weui_cells weui_cells_form">
            <div className={this.state.numberError?"weui_cell weui_cell_warn":"weui_cell"}>
                <div className="weui_cell_hd"><label for="" className="weui_label">学号</label></div>
                <div className="weui_cell_bd weui_cell_primary">
                    <input className="weui_input" type="number" name='number' id='number' value={this.state.number} onChange={this.handleNumber} placeholder="请输入学号"/>
                </div>
                <div className="weui_cell_ft">
                    <i className="weui_icon_warn"></i>
                </div>
            </div>
            <div className={this.state.nameError?"weui_cell weui_cell_warn":"weui_cell"}>
                <div className="weui_cell_hd"><label for="" className="weui_label">姓名</label></div>
                <div className="weui_cell_bd weui_cell_primary">
                    <input className="weui_input" type="text"  value={this.state.name} onChange={this.handleName} placeholder="请输入姓名"/>
                </div>
                <div className="weui_cell_ft">
                    <i className="weui_icon_warn"></i>
                </div>
            </div>
        </div>
        <div className="weui_cells_title">登记人信息</div>
        <div className="weui_cells weui_cells_form">
            <div className={this.state.phoneError?"weui_cell weui_cell_warn":"weui_cell"}>
                <div className="weui_cell_hd"><label for="" className="weui_label">手机号</label></div>
                <div className="weui_cell_bd weui_cell_primary">
                    <input className="weui_input" type="number"  value={this.state.phone} onChange={this.handlePhone} placeholder="请输入手机号" />
                </div>
                <div className="weui_cell_ft">
                    <i className="weui_icon_warn"></i>
                </div>
            </div>
            <div className={this.state.name2Error?"weui_cell weui_cell_warn":"weui_cell"}>
                <div className="weui_cell_hd"><label for="" className="weui_label">姓名</label></div>
                <div className="weui_cell_bd weui_cell_primary">
                    <input className="weui_input" type="text"  value={this.state.name2} onChange={this.handleName2} placeholder="请输入姓名"/>
                </div>
                <div className="weui_cell_ft">
                    <i className="weui_icon_warn"></i>
                </div>
            </div>
        </div>
        <div className="weui_opr_area">
            <p className="weui_btn_area">
                <a href="javascript:;" className="weui_btn weui_btn_primary">提交登记</a>
            </p>
        </div>
</div>
        )
    }
  });
 
  ReactDOM.render(
    <MyForm />,
    document.getElementById("container")
    );
</script>
</body>