react表單操作

來源:互聯網
上載者:User

標籤:

 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.!#$%&‘*+\/=?^_`{|}~-][email protected][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表單操作

相關文章

聯繫我們

該頁面正文內容均來源於網絡整理,並不代表阿里雲官方的觀點,該頁面所提到的產品和服務也與阿里云無關,如果該頁面內容對您造成了困擾,歡迎寫郵件給我們,收到郵件我們將在5個工作日內處理。

如果您發現本社區中有涉嫌抄襲的內容,歡迎發送郵件至: info-contact@alibabacloud.com 進行舉報並提供相關證據,工作人員會在 5 個工作天內聯絡您,一經查實,本站將立刻刪除涉嫌侵權內容。

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.