-
Notifications
You must be signed in to change notification settings - Fork 2
/
Copy path9.表单组件.html
117 lines (109 loc) · 5.96 KB
/
9.表单组件.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<script src="./build/react.js"></script>
<script src="./build/react-dom.js"></script>
<script src="./build/browser.min.js"></script>
</head>
<body>
<div id="example"></div>
<div id="example1"></div>
<div id="example2"></div>
<script type="text/babel">
/* 表单组件 */
/* 诸如 input textarea option 这样的表单组件不同于其他原生组件，因为他们可以通过用户交互发生变化。这些组件提供的界面使响应用户交互的表单数据处理更加容易 */
/* 交互属性 */
/* 表单组件支持几个受用户交互影响的属性：
value : 用于input textarea 组件；
checked ：用于类型为checkbox或者radio的 input 组件；
selected ：用于option 组件；
——在HTML中， textarea 的值通过子节点设置，在 React中则应该使用 value 替代；
——表单组件可以通过 onChange 回调函数 来监听组件变化。当用户做出以下交互时， onChange 执行并通过浏览器做出响应：
input 或 textarea 的value 发生变化时；
input 的 checked 状态改变时；
option 的selected 状态改变时；
——和所有DOM事件一样，所有的HTML原生组件都支持 onChange 属性，而且可以用来监听冒泡的 change 事件；
——注意：对于 input 和textarea ，onChange 取代一般应该用来替代 DOM 内建的 oninput 事件处理 */
/* 受控组件 */
/* 一个受控的 input 有一个 value prop。渲染一个受控的input 会反映 value prop的值：
render:function() {
return <input type="text" value="Hello">
}
用户输入在被渲染的元素里将没有作用，因为 React 已经声明值为 Hello 。要更新value来相应用户输入，你可以使用 onChange 事件。下例中，我们接受用户提供的值并更新 input 组件的value prop 。这个模式使实现响应或者验证用户输入的界面更加容易，例如，我们还可以对用户的输入进行处理：
handleChange:function(event) {
this.setState({value:event.target.value.substr(0,100)})
}
上面的代码接受用户输入，并截取100个字符。受控组件不维持一个自己的内部状态，它单纯的基于 props 渲染
*/
var Component=React.createClass({
getInitialState:function() {
return {value:"Hello!"}
},
handleChange:function(event) {
this.setState({value:event.target.value});
},
render:function() {
return (
<input
type="text"
value={this.state.value}
onChange={this.handleChange}
/>
)
}
})
ReactDOM.render(
<Component />,
document.getElementById("example2")
)
/* 复选框与单选按钮的潜在问题 */
/* 当心，在力图标准化复选框与单选按钮的变换处理中，React使用 click 事件代替 change 事件。在大多数情况下他们表现的如同预期，除了在 change handler中调用 preventDefault。preventDefault阻止了浏览器视觉上更新输入，即使 checked 被触发。变通的方式是要么移除 preventDefault 的调用，要么把 checked 的触发放在一个 setTimeout 里 */
/* 不受控组件 */
/* 一个没有 value 属性的 input 是一个不受控组件：
render:function() {
return <input type="text">
}
上面代码将渲染出一个空值的输入框，用户输入将立即反映到元素上。和受控元素一样，使用 onChange 事件可以监听值的变化；
不受控组件维持它自己的内部状态；
*/
/* 默认值 */
/* 如果想给组件设置一个非空的初始值，可以使用 defaultValue 属性：
render:function() {
return <input type="text" defaultValue="Hello!">
}
这个例子会像上面的受控组件例子一样运行；
同样的，<input type="checkbox"> 和 <input type="radio">都支持 defaultChecked， 而 <select> 支持defaultValue；
注意：defaultValue 和 defaultChecked 属性只能在内部渲染时被使用。如果你需要在随后的渲染更新值，你需要使用 受控组件*/
/* 高级主题浏览 */
/* 为什么使用受控组件?
在React中使用诸如 input 的表单组件时，遇到了一个在传统HTML中没有的挑战。比如下面的代码：
<input type="text" name="title" value="Untitled" />
它渲染一个初始值为 Untitled 的输入框，当用户改变输入框的值时，节点的 value 属性将随之变化，但是 .getAttribute("value") 方法还是会返回初始设置的值 Untitled；
与HTML不同，React组件必须在任何时间点表现视图的状态，而不仅仅是在初始化时。比如在React中：
render:function() {
return <input type="text" name="title" value="Untitled">
}
由于这个方法描述了在任意时间点上的视图，那么文本输入框中的值就应该始终是 Untitled。
*/
/* 为什么 textarea 使用 value 属性：
在HTML中，textarea 的值通常使用子节点设置(这是反例，在React中不要这样使用)：
<textarea name="description">This is the description</textarea>
对HTML而言，让开发者设置多行的值很容易。但是，由于React 是javascript，没有字符串限制，可以使用 \n 实现换行。简言之，React已经有 value defaultValue 属性，textarea 组件的子节点扮演什么角色就有点模棱两可了。基于此，设置 textarea 值时不应该使用子节点！！！
<textarea name="description" value="This is a description" />
如果非要使用子节点，效果和使用 defaultValue 一样
*/
/* 为什么 select 使用value 属性：
HTML中，select 通常使用 option 的selected 属性设置选中状态；React为了更方便控制组件，采用以下方式替代：
<select value="B">
<option value="A">Apple</option>
<option value="B">Banana</option>
<option value="C">Cranberry</option>
</select>
如果是不受控组件，则使用 defaultValue ；
注意：给value 属性传递一个数组，可以选中多个选项：
<select multiple={true} value={["B","C"]}>
</script>
</body>
</html>