首页 > 其他 > 详细

React表单元素的使用

时间:2015-12-19 21:42:39      阅读:211      评论:0      收藏:0      [点我收藏+]

一、

 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>

 

React表单元素的使用

原文:http://www.cnblogs.com/shamgod/p/5059739.html

(0)
(1)
   
举报
评论 一句话评论(0
关于我们 - 联系我们 - 留言反馈 - 联系我们:wmxa8@hotmail.com
© 2014 bubuko.com 版权所有
打开技术之扣,分享程序人生!