標籤：
一、
1 <!DOCTYPE html> 2 <html lang="zh-cn"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>表單詳解</title> 6 </head> 7 <body> 8 <script src="./react-0.13.2/react-0.13.2/build/react-with-addons.js"></script> 9 <script src="./react-0.13.2/react-0.13.2/build/JSXTransformer.js"></script>10 <script type="text/jsx">11 var MyForm = React.createClass({ 12 getInitialState: function () {13 return {14 username: "",15 gender: "man",16 checked: true17 }; 18 },19 handleUsernameChange: function (event) { 20 this.setState({21 username: event.target.value22 });23 },24 handleGenderChange: function (event) { 25 this.setState({26 gender: event.target.value27 });28 },29 handleCheckboxChange: function (event) { 30 this.setState({31 checked: event.target.checked32 });33 },34 submitHandler: function (event) {35 event.preventDefault();36 console.log(this.state); 37 },38 render: function () {39 return <form onSubmit={this.submitHandler}>40 <label htmlFor="username">請輸入使用者名稱:</label>41 <input id="username" type="text" value={this.state.username} onChange={this.handleUsernameChange} />42 <br />43 <select value={this.state.gender} onChange={this.handleGenderChange}> 44 <option value="man">男</option>45 <option value="woman">女</option>46 </select>47 <br />48 <label htmlFor="checkbox">同意使用者協議</label>49 <input id="checkbox" type="checkbox" value="agree" checked={this.state.checked} onChange={this.handleCheckboxChange} />50 <button type="submit">註冊</button>51 </form>;52 } 53 });54 React.render(<MyForm></MyForm>, document.body);55 </script>56 </body>57 </html>
React表單元素的使用
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
