React表单元素的使用

一、

 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: true
17                 }; 
18             },
19             handleUsernameChange: function (event) { 
20                 this.setState({
21                     username: event.target.value
22                 });
23             },
24             handleGenderChange: function (event) { 
25                 this.setState({
26                     gender: event.target.value
27                 });
28             },
29             handleCheckboxChange: function (event) { 
30                 this.setState({
31                     checked: event.target.checked
32                 });
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>

 

posted @ 2015-12-19 20:40  shamgod  阅读(305)  评论(0)  编辑  收藏  举报
haha