React学习：双向数据绑定、约束性和非约束性组件-学习笔记
生活随笔
收集整理的這篇文章主要介紹了
React学习：双向数据绑定、约束性和非约束性组件-学习笔记
小編覺得挺不錯(cuò)的,現(xiàn)在分享給大家,幫大家做個(gè)參考.
文章目錄
- React學(xué)習(xí)：雙向數(shù)據(jù)綁定、約束性和非約束性組件-學(xué)習(xí)筆記
- 表單 約束性和非約束性組件（受限/非受限）
- 雙向數(shù)據(jù)綁定小例子
React學(xué)習(xí)：雙向數(shù)據(jù)綁定、約束性和非約束性組件-學(xué)習(xí)筆記
表單 約束性和非約束性組件（受限/非受限）
約束性 由react 管理了value（value不再是死值，this.state.value）
<input type="text" value={this.state.value} onChange={(e)=>this.handleChange(e)} />非約束性 value由原生的DOM管理的(defaultValue 相當(dāng)于原生value屬性，value值是用戶輸入的值）
<input type="text" defaultValue="123" /> <input type="text" value="123" />雙向數(shù)據(jù)綁定小例子
<!DOCTYPE html> <html><head><title>react-雙向數(shù)據(jù)綁定</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 datavalue:'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 dataname:'123',password:'',phone:'',male:'man',select:'z'}}handleChange(e){var abc=e.target.name; //name password phonethis.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>手機(jī)號(hào):</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><!-- . [] 區(qū)別 var obj = {'id':1}; obj.id obj['id'] var name = 'id'; obj[name] -->注冊(cè)小例子：
<!DOCTYPE html> <html><head><title>react-注冊(cè)</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 dataname:'',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 = '請(qǐng)輸入姓名'// }else if(!filter.test(value)){// error = '姓名格式錯(cuò)誤 '// }else {// error = '';// }// this.setState({// name:value,// nameError:error// })// }handleChange(e){var {value,name} = e.target;var filter = new RegExp(e.target.getAttribute('filter')); //顯示創(chuàng)建是可以傳入字符串var error = '';if(value ==''){error = '請(qǐng)輸入信息'}else if(!filter.test(value)){error = '輸入格式錯(cuò)誤 '}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; //對(duì)象解構(gòu)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>手機(jī)號(hào):</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><!-- . [] 區(qū)別 var obj = {'id':1}; obj.id obj['id'] var name = 'id'; obj[name] --><!-- 正則表達(dá)式創(chuàng)建 方式 1、var filter = /^[a-zA-Z0-9]\w{5,17}$/; //隱式創(chuàng)建 2、var filter = new RegExp('^[a-zA-Z0-9]\w{5,17}$'); //顯示創(chuàng)建是可以傳入字符串 --><!-- var obj = {id:1,name:111 } var id = obj.id ; var name = obj.name; var {id,name} = obj; -->總結(jié)
以上是生活随笔為你收集整理的React学习：双向数据绑定、约束性和非约束性组件-学习笔记的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： React学习:事件绑定、组件定义、fo
- 下一篇： React学习：组件之间的关系、参数传递