首页 > 其他 > 详细

react表单操作

时间:2016-06-02 00:33:24      阅读:233      评论:0      收藏:0      [点我收藏+]
 var MyForm = React.createClass({
    getInitialState: function() {
      return {
        email: "",
        intro: "",
        city: "hz",
        male: true, //性别
        emailError: "",
        introError: ""
      };
    },
    handleEmail: function(e) {
      var value = e.target.value;
      var error = ‘‘;
      if(!(/^[a-zA-Z0-9.!#$%&‘*+\/=?^_`{|}~-]+@[a-zA-Z0-9](?:[a-zA-Z0-9-]{0,61}[a-zA-Z0-9])?(?:\.[a-zA-Z0-9](?:[a-zA-Z0-9-]{0,61}[a-zA-Z0-9])?)*$/.test(value))) {
        error = ‘请输入正确的Email‘;
      }
      this.setState({
        email: value,
        emailError: error
      });
    },
    handleIntro: function(e) {
      var value = e.target.value;
      var error = "";
      if(value.length < 10) {
        error = "介绍不能少于十个字";
      }
      this.setState({
        intro: value,
        introError: error
      });
    },
    handleCity: function(e) {
      var value = e.target.value;
      this.setState({
        city: value,
      });
    },
    handleGender: function(e) {
      var male = !!(e.target.value == ‘MALE‘);
      this.setState({
        male: male
      });
    },
    render: function() {
      return (
        <div>
        <p>
          <label htmlFor=‘email‘>email:</label>
          <input type=‘text‘ name=‘intro‘ id=‘intro‘ value={this.state.email} onChange={this.handleEmail} />
          <span>{this.state.emailError}</span>
        </p>
        <p>
          <label htmlFor=‘intro‘>intro:</label>
          <textarea type=‘text‘ name=‘intro‘ id=‘intro‘ value={this.state.intro} onChange={this.handleIntro} />
          <span>{this.state.introError}</span>
        </p>
        <p>
          <label htmlFor=‘city‘>所在城市:</label>
          <select  name=‘city‘ id=‘city‘ value={this.state.city} onChange={this.handleCity}>
            <option value=‘hz‘>杭州</option>
            <option value=‘bj‘>北京</option>
            <option value=‘sh‘>上海</option>
          </select>
        </p>
        <p>
          <label>性别:</label>
          <input type=‘radio‘ name=‘gender‘ checked={this.state.male} onChange={this.handleGender} value=‘MALE‘ />
          <input type=‘radio‘ name=‘gender‘ checked={!this.state.male} onChange={this.handleGender} value=‘FEMALE‘ />
        </p>
        </div>
        )
    }
  });

  React.render(
    <MyForm />,
    document.getElementById("div1")
    );
 
 

react表单操作

原文:http://www.cnblogs.com/hejieng/p/5551378.html

(0)
(0)
   
举报
评论 一句话评论(0
关于我们 - 联系我们 - 留言反馈 - 联系我们:wmxa8@hotmail.com
© 2014 bubuko.com 版权所有
打开技术之扣,分享程序人生!