React学习：ref调用、组件封装调用-学习笔记
生活随笔
收集整理的這篇文章主要介紹了
React学习：ref调用、组件封装调用-学习笔记
小編覺(jué)得挺不錯(cuò)的,現(xiàn)在分享給大家,幫大家做個(gè)參考.
文章目錄
- React學(xué)習(xí)：ref調(diào)用、組件封裝調(diào)用-學(xué)習(xí)筆記
- ref調(diào)用-string形式
- ref調(diào)用-回調(diào)形式（官方推薦）
- ref調(diào)用-父調(diào)子
- 組件封裝調(diào)用demo（全選）
- demo1(單組件)
- demo2(重構(gòu)-多組件)
React學(xué)習(xí)：ref調(diào)用、組件封裝調(diào)用-學(xué)習(xí)筆記
ref調(diào)用-string形式
<!DOCTYPE html> <html><head><title>ref</title><meta charset="UTF-8" /><script src="js/react.development.js"></script><script src="js/react-dom.development.js"></script><script src="js/babel.min.js"></script></head><body><div id="example"></div><!--ref一共有兩種使用方式回調(diào)函數(shù)形式（官方推薦） 可以掛到組件上也可以是dom元素上string形式--><script type="text/babel">class TabList extends React.Component{handleClick(){this.refs.myInput.focus();this.refs.myInput.style.background='yellow';}render () {return(<div><input type="text" ref="myInput"/><button onClick={()=>this.handleClick()}>click</button></div>)}};ReactDOM.render(<TabList />,document.getElementById('example'));</script></body> </html>ref調(diào)用-回調(diào)形式（官方推薦）
<!DOCTYPE html> <html><head><title>ref</title><meta charset="UTF-8" /><script src="js/react.development.js"></script><script src="js/react-dom.development.js"></script><script src="js/babel.min.js"></script></head><body><div id="example"></div><!--ref一共有兩種使用方式回調(diào)函數(shù)形式（官方推薦） 可以掛到組件上也可以是dom元素上string形式--><script type="text/babel">class MyBtn extends React.Component{render(){return <button ref={(dom)=>{this.props.scope.mybtn = dom}}>btn</button>}}class TabList extends React.Component{handleClick(){this.myInput.focus();this.myInput.style.background='yellow';this.mybtn.innerText = '子組件'}render () {return(<div><input type="text" ref={(dom)=>{this.myInput = dom}}/><button onClick={()=>this.handleClick()}>click</button><MyBtn scope={this}/></div>)}};ReactDOM.render(<TabList />,document.getElementById('example'));</script></body> </html>ref調(diào)用-父調(diào)子
<!DOCTYPE html> <html><head><title>ref</title><meta charset="UTF-8" /><script src="js/react.development.js"></script><script src="js/react-dom.development.js"></script><script src="js/babel.min.js"></script></head><body><div id="example"></div><script type="text/babel">class Son extends React.Component {constructor(props) {super();this.state = {name:'我是子組件',}; }handleChange(){// this.setState({// name:'子組件修改了'// })console.log(12345);}render() {return (<div><h1>子組件-----{this.state.name}</h1></div>)}};class Parent extends React.Component{handleClick(){this.myInput.value = this.mySon.state.name;this.mySon.handleChange();}render () {return(<div><h1>父組件</h1><input type="text" ref={(input)=>{this.myInput = input}}/><button onClick={()=>this.handleClick()}>獲取子組件的值</button><Son ref={(dom)=>{this.mySon = dom}}/></div>)}};ReactDOM.render(<Parent />,document.getElementById('example'));</script></body> </html>組件封裝調(diào)用demo（全選）
demo1(單組件)
<!DOCTYPE html> <html><head><title>全選</title><meta charset="UTF-8" /><script src="js/react.development.js"></script><script src="js/react-dom.development.js"></script><script src="js/babel.min.js"></script></head><body><div id="example"></div><script type="text/babel">class CheckAll extends React.Component{constructor(){super()this.state = {checkAll:false, //全選的狀態(tài)items:[{name:'紅色',check:true},{name:'黃色',check:false},{name:'綠色',check:false},{name:'藍(lán)色',check:true}]}}handleCheckAll(){ //全選let {checkAll,items} = this.state;items.map((item,i)=>{return item.check = !checkAll;})this.setState({checkAll:!checkAll, //取全選當(dāng)前反的狀態(tài)items:items})}handleCheckItem(item){ //當(dāng)前的選項(xiàng)let {checkAll,items} = this.state;items.map((v,i)=>{if(item.name==v.name){return v.check = !item.check;}})var _checkAll = items.every(function(v,i){return v.check})this.setState({checkAll:_checkAll, //取全選當(dāng)前反的狀態(tài)items:items})}render(){let {checkAll,items} = this.state;return(<div><input type="checkbox" checked={checkAll} onChange={()=>this.handleCheckAll()}</div><div>{items.map((item,i)=>{return (<div key={i}><input type="checkbox" checked={item.check} onChange={()=>this.handleCheckItem(item)} />{item.name}</div>)})}</div>)}};ReactDOM.render(<CheckAll />,document.getElementById('example'));</script></body> </html><!-- var arr = [1,2,3,4,5];var a = arr.every(function(item,index){return item >1 }) -->demo2(重構(gòu)-多組件)
<!DOCTYPE html> <html><head><title>全選</title><meta charset="UTF-8" /><script src="js/react.development.js"></script><script src="js/react-dom.development.js"></script><script src="js/babel.min.js"></script></head><body><div id="example"></div><script type="text/babel">class CheckALL extends React.Component{constructor(){super()this.state={checkAll:false, //全選的狀態(tài)items:[{name:'紅色',check:true},{name:'黃色',check:false},{name:'綠色',check:false},{name:'藍(lán)色',check:true}]}}handleCheckAll(){ //全選let {checkAll,items} = this.state;items.map((item,i)=>{return item.check = !checkAll;})this.setState({checkAll:!checkAll, //取全選當(dāng)前反的狀態(tài)items:items})}handleCheckItem(item){ //當(dāng)前的選項(xiàng) item 子傳的值 == {name:name,check:!check}console.log(item);let {name,check } = item;let {checkAll,items} = this.state;items.map((v,i)=>{if(v.name==name){return v.check = check;}})var _checkAll = items.every(function(v,i){return v.check})this.setState({checkAll:_checkAll, //取全選當(dāng)前反的狀態(tài)items:items})}render () {let {checkAll,items} = this.state;return(<div><div><input type="checkbox" checked={checkAll} onChange={()=>this.handleCheckAll()} />全選</div>{items.map((item,i)=>{return <CheckItem {...item} key={i} handleCheckItem={this.handleCheckItem.bind(this)}/>})}</div>)}};class CheckItem extends React.Component{constructor(props){super()this.state={name:props.name,check:props.check}}//props發(fā)生變化時(shí)觸發(fā)//nextProps ==== newValue，prevProps====oldValuecomponentWillReceiveProps(nextProps,prevProps){ // nextProps父中改變新的值，prevProps原有的//console.log(nextProps,prevProps)if(nextProps.check != prevProps.check){this.setState({check:nextProps.check})}}handleCheck(){let {name,check} = this.state;this.setState({check:!check});this.props.handleCheckItem({name:name,check:!check})}render () {//let {name,check} = this.props; //父的值發(fā)生了變化，二種處理方式，一：添加componentWillReceiveProps 二，直接從父中取值let {name,check} = this.state;return(<div><input type="checkbox" checked={check} onChange={()=>this.handleCheck()} />{name}</div>)}};ReactDOM.render(<CheckALL />,document.getElementById('example'));</script></body> </html>總結(jié)
以上是生活随笔為你收集整理的React学习：ref调用、组件封装调用-学习笔记的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問(wèn)題。
- 上一篇： SuperMap注册流程记录
- 下一篇： React学习：脚手架搭建、antd引入