文章目录
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; -->