One
1 <!DOCTYPE HTML>2 <HTMLLang= "ZH-CN">3 <Head>4 <MetaCharSet= "UTF-8">5 <title>Detailed form</title>6 </Head>7 <Body>8 <Scriptsrc= "./react-0.13.2/react-0.13.2/build/react-with-addons.js"></Script>9 <Scriptsrc= "./react-0.13.2/react-0.13.2/build/jsxtransformer.js"></Script>Ten <Scripttype= "TEXT/JSX"> One varMyForm=React.createclass ({ A getinitialstate:function () { - return { - Username:"", the Gender:"Mans", - checked:true - }; - }, + Handleusernamechange:function(event) { - This. SetState ({ + Username:event.target.value A }); at }, - Handlegenderchange:function(event) { - This. SetState ({ - Gender:event.target.value - }); - }, in Handlecheckboxchange:function(event) { - This. SetState ({ to checked:event.target.checked + }); - }, the Submithandler:function(event) { * Event.preventdefault (); $ Console.log ( This. State); Panax Notoginseng }, - Render:function () { the return <form OnSubmit={ This. Submithandler}> + <label Htmlfor="username">Please enter user name:</label> A <Input ID="username"type="text"value={ This. State.username} onChange={ This. Handleusernamechange}/> the <BR/> + <Select Value={ This. State.gender} onChange={ This. Handlegenderchange}> - <option Value="Mans">male</option> $ <option Value="woman">female</option> $ </select> - <BR/> - <label Htmlfor="checkbox">agree to User Agreement</label> the <Input ID="checkbox"type="checkbox"value="Agree"checked={ This. state.checked} onChange={ This. Handlecheckboxchange}/> - <Button Type="Submit">Register</button>Wuyi </form>; the } - }); Wu React.render (<MyForm></Myform>, document.body); - </Script> About </Body> $ </HTML>
React use of form elements
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
