var MyForm = React.createclass ({getinitialstate:function () {return {email: "", Intro: "", City: "Hz", male:true,//Gender 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 = ' Please enter the correct email '; } this.setstate ({email:value, emailerror:error}); }, Handleintro:function (e) {var value = E.target.value; var error = ""; if (Value.length <) {Error = "Introduction cannot be less than 10 words"; } 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:& lt;/label> <input type= ' text ' name= ' intro ' id= ' intro ' Value={this.state.email} Onchange={this.handleemail} /> <span>{this.state.emailError}</span> </p> <p> <label html For= ' intro ' >intro:</label> <textarea type= ' text ' name= ' intro ' id= ' intro ' Value={this.state.intro} OnC Hange={this.handleintro}/> <span>{this.state.introError}</span> </p> <p> ; <label htmlfor= ' city ' > location:</label> <select name= ' town ' id= ' Cities ' value={this.state.city} Onchang e={this.handlecity}> <option value= ' Hz ' > Hangzhou </option> <option value= ' bj ' > Beijing </o ption> <option value= ' sh ' > Shanghai</option> </select> </p> <p> <label> gender:</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 form Action