defaultValue与value的区别 (react.js)
2017-05-17 10:22
351 查看
表单是前端非常重要的一块内容,并且往往包含了错误校验等逻辑。
React对表单元素做了专门的优化处理,他对表单元素做了一些抽象,使得他们的使用方式更统一更规范。
表单里面出来了一个新的概念叫“约束性组件”。那么如何理解约束性组件和非约束性组件呢。
约束性组件,简单的说,就是由React管理了它的value,而非约束性组件的value就是原生的DOM管理的。
他们的写法上也有很大区别。
非约束性组件这么写:
这个
而约束性组件是这么写的:
这里,value属性不再是一个写死的值,他是
这个时候实际上 input 的 value 根本不是用户输入的内容。而是onChange 事件触发之后,由于 this.setState 导致了一次重新渲染。不过React会优化这个渲染过程,实际它依然是通过设置input的value来实现的。
但是一定要注意,约束性组件显示的值和用户输入的值虽然很多时候是相同的,但他们根本是两码事。约束性组件显示的是
对比约束性组件和非约束性组件的输入流程:
非约束性组件: 用户输入A -> input 中显示A
约束性组件: 用户输入A -> 触发onChange事件 -> handleChange 中设置 state.name = “A” -> 渲染input使他的value变成A
正式因为这样,强烈推荐使用约束性组件,因为它能更好的控制组件的生命流程。
React 把 input,textarea 和 select 三个组件做了抽象和封装,他们的用法变得非常统一,你基本上可以当做同一个组件来用。
他们现在有统一的 value 属性 和 onChange 事件,现在对于这三种组件你都可以这样写
不过 chekbox有和上面三个不一样,因为checkbox改变的不是 value ,而是 checked 状态。
你可以这样写:
下面是一个包含了 input,textarea, select, radio 的表单,并且做了简单的校验:
React对表单元素做了专门的优化处理,他对表单元素做了一些抽象,使得他们的使用方式更统一更规范。
约束性和非约束性组件
表单里面出来了一个新的概念叫“约束性组件”。那么如何理解约束性组件和非约束性组件呢。约束性组件,简单的说,就是由React管理了它的value,而非约束性组件的value就是原生的DOM管理的。
他们的写法上也有很大区别。
非约束性组件这么写:
<input type="text" defaultValue="a" />
这个
defaultValue其实就是原生DOM中的
value属性。这样写出的来的组件,其value值就是用户输入的内容,React完全不管理输入的过程。
而约束性组件是这么写的:
<input type="text" value={this.state.name} onChange={this.handleChange} /> //...省略部分代码 handleChange: function(e) { this.setState({name: e.target.value}); }
这里,value属性不再是一个写死的值,他是
this.state.name,而
this.state.name是由
this.handleChange负责管理的。
这个时候实际上 input 的 value 根本不是用户输入的内容。而是onChange 事件触发之后,由于 this.setState 导致了一次重新渲染。不过React会优化这个渲染过程,实际它依然是通过设置input的value来实现的。
但是一定要注意,约束性组件显示的值和用户输入的值虽然很多时候是相同的,但他们根本是两码事。约束性组件显示的是
this.state.name的值。你可以在handleChange中对用户输入的值做任意的处理,比如你可以做错误校验。
对比约束性组件和非约束性组件的输入流程:
非约束性组件: 用户输入A -> input 中显示A
约束性组件: 用户输入A -> 触发onChange事件 -> handleChange 中设置 state.name = “A” -> 渲染input使他的value变成A
正式因为这样,强烈推荐使用约束性组件,因为它能更好的控制组件的生命流程。
更统一和更规范的接口
React 把 input,textarea 和 select 三个组件做了抽象和封装,他们的用法变得非常统一,你基本上可以当做同一个组件来用。他们现在有统一的 value 属性 和 onChange 事件,现在对于这三种组件你都可以这样写
<input type='text' name='intro' id='intro' value={this.state.email} onChange={this.handleEmail} /> <textarea type='text' name='intro' id='intro' value={this.state.intro} onChange={this.handleIntro} /> <textarea type='text' name='intro' id='intro' value={this.state.intro} onChange={this.handleIntro} />
不过 chekbox有和上面三个不一样,因为checkbox改变的不是 value ,而是 checked 状态。
你可以这样写:
<input type='radio' name='gender' checked={this.state.male} onChange={this.handleGender} value='MALE' /> <input type='radio' name='gender' checked={!this.state.male} onChange={this.handleGender} value='FEMALE' />
一个示例
下面是一个包含了 input,textarea, select, radio 的表单,并且做了简单的校验:var MyForm = React.createClass({
getInitialState: function() {
return {
email: "",
intro: "",
city: "hz",
male: true, //性别
emailError: "",
introError: ""
};
},
handleEmail: function(e) {
var value = e.target.value;
var error = '';
if(!(/^[a-zA-Z0-9.!#$%&'*+\/=?^_`{|}~-]+@[a-zA-Z0-9](?:[a-zA-Z0-9-]{0,61}[a-zA-Z0-9])?(?:\.[a-zA-Z0-9](?:[a-zA-Z0-9-]{0,61}[a-zA-Z0-9])?)*$/.test(value))) {
error = '请输入正确的Email';
}
this.setState({
email: value,
emailError: error
});
},
handleIntro: function(e) {
var value = e.target.value;
var error = "";
if(value.length < 10) {
error = "介绍不能少于十个字";
}
this.setState({
intro: value,
introError: error
});
},
handleCity: function(e) {
var value = e.target.value;
this.setState({
city: value,
});
},
handleGender: function(e) {
var male = !!(e.target.value == 'MALE');
this.setState({
male: male
});
},
render: function() {
return (
<div>
<p>
<label htmlFor='email'>email:</label>
<input type='text' name='intro' id='intro' value={this.state.email} onChange={this.handleEmail} />
<span>{this.state.emailError}</span>
</p>
<p>
<label htmlFor='intro'>intro:</label>
<textarea type='text' name='intro' id='intro' value={this.state.intro} onChange={this.handleIntro} />
<span>{this.state.introError}</span>
</p>
<p>
<label htmlFor='city'>所在城市:</label>
<select name='city' id='city' value={this.state.city} onChange={this.handleCity}>
<option value='hz'>杭州</option>
<option value='bj'>北京</option>
<option value='sh'>上海</option>
</select>
</p>
<p>
<label>性别:</label>
<input type='radio' name='gender' checked={this.state.male} onChange={this.handleGender} value='MALE' /> <input type='radio' name='gender' checked={!this.state.male} onChange={this.handleGender} value='FEMALE' /></p>
</div>
)
}
});
React.render(
<MyForm />,
document.getElementById("div1")
);
相关文章推荐
- 夺命雷公狗-----React---18--value和defaultValue的区别
- SHELL variables default value, ${var:-DEFAULT}和${var=DEFAULT}的一点区别
- 【转】SHELL variables default value, ${var:-DEFAULT}和${var=DEFAULT}的一点区别
- js事件之event.preventDefault()与event.stopPropagation()用法区别
- JS:innerHTML、innerText和value的区别
- AngularJS constant和value区别详解
- FireFox/Chrome不支持在前台js读后台Attributes.Add("DefaultValue")的属性
- JS中innerHTML与value、val的用法区别
- JS 阻止键盘输入event.preventDefault 和window.event.returnValue
- js中在dotnot中innerText与value的使用区别
- JS中innerHTML、outerHTML、innerText 、outerText、value的区别与联系? jQuery中的text()、html()和val()
- js事件之event.preventDefault()与(www.111cn.net)event.stopPropagation()用法区别
- js中val()和value的区别
- js中innerHTML和value的区别
- js事件之event.preventDefault()与event.stopPropagation()用法区别
- assigned , native , identity 区别-Field 'id' doesn't have a default value问题解决方法
- js中preventDefault和stopPropagation两个方法的区别
- JS中preventDefault、stopPropagation、return false三者之间的区别
- js中innerText,value,innerHTML的区别
- JS中innerHTML、outerHTML、innerText 、outerText、value的区别与联系?