[React网络整理]React之表单组件的学习笔记
表单组件
交互属性表单组件支持几个受用户交互影响的属性: value,用于 表单组件可以通过 onChange 回调函数来监听组件变化。当用户做出以下交互时,onChange 执行并通过浏览器做出响应:
受限组件设置了 value 的 render: function() {
return <input type="text" value="Hello!" />;
}
上面的代码将渲染出一个值为 Hello! 的 input 元素。用户在渲染出来的元素里输入任何值都不起作用,因为 React 已经赋值为 Hello!。如果想响应更新用户输入的值,就得使用 onChange 事件: getInitialState: function() {
return {value: 'Hello!'};
},handleChange: function(event) {
this.setState({value: event.target.value});
},render: function() {
var value = this.state.value;
return <input type="text" value={value} onChange={this.handleChange} />;
}
上面的代码中,React 将用户输入的值更新到 组件的 value 属性。这样实现响应或者验证用户输入的界面就很容易了。例如: handleChange: function(event) {
this.setState({value: event.target.value.substr(0,140)});
}
上面的代码接受用户输入,并截取前 140 个字符。 不受限组件没有设置 value(或者设为 null) 的 组件是一个不受限组件。对于不受限的 组件,渲染出来的元素直接反应用户输入。例如: render: function() {
return <input type="text" />;
}
上面的代码将渲染出一个空值的输入框,用户输入将立即反应到元素上。和受限元素一样,使用 onChange 事件可以监听值的变化。 如果想给组件设置一个非空的初始值,可以使用 defaultValue 属性。例如: render: function() {
return <input type="text" defaultValue="Hello!" />;
}
上面的代码渲染出来的元素和受限组件一样有一个初始值,但这个值用户可以改变并会反应到界面上。 同样地, 类型为 radio、checkbox 的 支持 defaultChecked 属性, 支持 defaultValue 属性。 render: function() {
return (
<div> <input type="radio" name="opt" defaultChecked /> Option 1 <input type="radio" name="opt" /> Option 2 <select defaultValue="C"> <option value="A">Apple</option> <option value="B">Banana</option> <option value="C">Cranberry</option> </select> </div> ); }
高级主题为什么使用受限组件?在 React 中使用诸如 比如下面的代码: <input type="text" name="title" value="Untitled" />
在 HTML 中将渲染初始值为 Untitled 的输入框。用户改变输入框的值时,节点的 value 属性(property)将随之变化,但是 node.getAttribute(‘value’) 还是会返回初始设置的值 Untitled. 与 HTML 不同,React 组件必须在任何时间点描绘视图的状态,而不仅仅是在初始化时。比如在 React 中: render: function() {
return <input type="text" name="title" value="Untitled" />;
}
该方法在任何时间点渲染组件以后,输入框的值就应该始终为 Untitled。 为什么
|