一、
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>
时间： 2024-08-04 03:27:43