标签：学习 约束性 name value React state var onChange event
文章目录
React学习：双向数据绑定、约束性和非约束性组件-学习笔记
表单 约束性和非约束性组件（受限/非受限）
约束性 由react 管理了value（value不再是死值，this.state.value）
<input type="text" value={this.state.value} onChange={(e)=>this.handleChange(e)} />
非约束性 value由原生的DOM管理的(defaultValue 相当于原生value属性，value值是用户输入的值）
<input type="text" defaultValue="123" />
<input type="text" value="123" />
双向数据绑定小例子
<!DOCTYPE html>
<html>
<head>
<title>react-双向数据绑定</title>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"/>
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
<script src="js/react.development.js"></script>
<script src="js/react-dom.development.js"></script>
<script type="text/javascript" src="js/babel.min.js"></script>
</head>
<body>
<div id="app"></div>
<script type="text/babel">
window.onload = function(){
//组件
class Tab extends React.Component{
constructor(){
super();
this.state = { //等同于vue data
value:'123'
}
}
handleChange(e){
this.setState({
value:e.target.value
})
}
render(){
var s = this.state.s;
return (
<div>
<p>
<input type="type" defaultValue="hello" />
</p>
Name:
<input type="text" value={this.state.value} onChange={(event)=>this.handleChange(event)}/>
<p>{this.state.value}</p>
</div>
)
}
};
ReactDOM.render(
<Tab/>,
document.getElementById('app'));
}
</script>
</body>
</html>
表单小例子：
<!DOCTYPE html>
<html>
<head>
<title>react-表单</title>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"/>
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
<script src="js/react.development.js"></script>
<script src="js/react-dom.development.js"></script>
<script type="text/javascript" src="js/babel.min.js"></script>
</head>
<body>
<div id="app"></div>
<script type="text/babel">
window.onload = function(){
//组件
class Tab extends React.Component{
constructor(){
super();
this.state = { //等同于vue data
name:'123',
password:'',
phone:'',
male:'man',
select:'z'
}
}
handleChange(e){
var abc=e.target.name; //name password phone
this.setState({
[abc]:e.target.value
})
}
handleRadio(e){
this.setState({
male:e.target.value
})
}
handleSelect(e){
this.setState({
select:e.target.value
})
}
submit(){
alert(JSON.stringify(this.state));
}
render(){
var color = ['red','blue','green'];
return (
<div>
<div>
<label>姓名：</label>
<input type="text" value={this.state.name} name="name"
onChange={(event)=>this.handleChange(event)}/>
</div>
<div>
<label>密码：</label>
<input type="password" value={this.state.password} name="password"
onChange={(event)=>this.handleChange(event)}/>
</div>
<div>
<label>手机号:</label>
<input type="text" value={this.state.phone} name="phone"
onChange={(event)=>this.handleChange(event)}/>
</div>
<div>
<input type='radio' name='radio1' defaultChecked />
<input type='radio' name='radio' checked={this.state.male=='man'?true:false}
value='man' onChange={(event)=>this.handleRadio(event)}/>男
<input type='radio' name='radio' checked={this.state.male=='woman'?true:false}
value='woman' onChange={(event)=>this.handleRadio(event)}/>女
</div>
<div>
<select defaultValue='B'>
<option>A</option>
<option>B</option>
<option>C</option>
</select>
<select value={this.state.select} onChange={(event)=>this.handleSelect(event)}>
{
color.map(function(item,index){
return <option key={index}>{item}</option>
})
}
</select>
</div>
<button onClick={()=>this.submit()}>提交</button>
</div>
)
}
};
ReactDOM.render(
<Tab/>,
document.getElementById('app'));
}
</script>
</body>
</html>
<!-- . [] 区别
var obj = {'id':1};
obj.id obj['id']
var name = 'id';
obj[name] -->
注册小例子：
<!DOCTYPE html>
<html>
<head>
<title>react-注册</title>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"/>
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
<script src="js/react.development.js"></script>
<script src="js/react-dom.development.js"></script>
<script type="text/javascript" src="js/babel.min.js"></script>
</head>
<body>
<div id="app"></div>
<script type="text/babel">
window.onload = function(){
//组件
class Tab extends React.Component{
constructor(){
super();
this.state = { //等同于vue data
name:'',
password:'',
phone:'',
male:'man',
address:'北京',
nameError:'',
passwordError:''
}
}
// handleChange(e){
// var abc=e.target.name; //name password phone
// this.setState({
// [abc]:e.target.value
// })
// }
// handleChange1(e){
// var {value} = e.target;
// var filter = /^[\u4E00-\u9FA5]{2,4}$/;
// var error = '';
// if(value ==''){
// error = '请输入姓名'
// }else if(!filter.test(value)){
// error = '姓名格式错误 '
// }else {
// error = '';
// }
// this.setState({
// name:value,
// nameError:error
// })
// }
handleChange(e){
var {value,name} = e.target;
var filter = new RegExp(e.target.getAttribute('filter')); //显示创建是可以传入字符串
var error = '';
if(value ==''){
error = '请输入信息'
}else if(!filter.test(value)){
error = '输入格式错误 '
}else {
error = '';
}
this.setState({
[name]:value,
[name+'Error']:error
})
}
handleChange2(e){
var {value,name} = e.target;
this.setState({
[name]:value
})
}
submit(){
var {name,password,phone,male,address} = this.state; //对象解构
var data = {
name:name,
passwrod:password,
phone:phone,
male:male,
address:address
}
alert(JSON.stringify(data));
}
render(){
var arr = ['北京','上海','湖北','广东'];
var {name,password,phone,male,address,nameError,passwordError,phoneError} = this.state;
return (
<div>
<div>
<label>姓名：</label>
<input type="text" value={name} name="name" filter="^[\u4E00-\u9FA5]{2,4}$"
onChange={(event)=>this.handleChange(event)}/>
<span>{nameError}</span>
</div>
<div>
<label>密码：</label>
<input type="password" value={password} name="password" filter="^[a-zA-Z0-9]\w{5,17}$"
onChange={(event)=>this.handleChange(event)}/>
<span>{passwordError}</span>
</div>
<div>
<label>手机号:</label>
<input type="text" value={phone} name="phone" filter="^(13[0-9]|14[5|8])\d{8}$"
onChange={(event)=>this.handleChange(event)}/>
<span>{phoneError}</span>
</div>
<div>
<input type='radio' name='male' checked={male=='man'?true:false}
value='man' onChange={(event)=>this.handleChange2(event)}/>男
<input type='radio' name='male' checked={male=='woman'?true:false}
value='woman' onChange={(event)=>this.handleChange2(event)}/>女
</div>
<select value={address} name="address" onChange={(event)=>this.handleChange2(event)}>
{
arr.map(function(item,index){
return <option key={index}>{item}</option>
})
}
</select>
<button disabled={!name||nameError||!password||passwordError||!phone||phoneError} onClick={()=>this.submit()}>提交</button>
</div>
)
}
};
ReactDOM.render(
<Tab/>,
document.getElementById('app'));
}
</script>
</body>
</html>
<!-- . [] 区别
var obj = {'id':1};
obj.id obj['id']
var name = 'id';
obj[name] -->
<!-- 正则表达式创建 方式
1、var filter = /^[a-zA-Z0-9]\w{5,17}$/; //隐式创建
2、var filter = new RegExp('^[a-zA-Z0-9]\w{5,17}$'); //显示创建是可以传入字符串 -->
<!-- var obj = {
id:1,
name:111
}
var id = obj.id ; var name = obj.name;
var {id,name} = obj; -->
标签：学习,约束性,name,value,React,state,var,onChange,event 来源： https://blog.csdn.net/hhhmonkey/article/details/119187863
本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享； 2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关； 3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关； 4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除； 5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。