react表單操作

標籤：

 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表單操作