React学习：ref调用、组件封装调用-学习笔记

文章目录

React学习：ref调用、组件封装调用-学习笔记
- ref调用-string形式
- ref调用-回调形式（官方推荐）
- ref调用-父调子
- 组件封装调用demo（全选）
- demo1(单组件)
- demo2(重构-多组件)

React学习：ref调用、组件封装调用-学习笔记

ref调用-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一共有两种使用方式回调函数形式（官方推荐）  可以挂到组件上也可以是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调用-回调形式（官方推荐）

<!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一共有两种使用方式回调函数形式（官方推荐）  可以挂到组件上也可以是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调用-父调子

<!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>

组件封装调用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, //全选的状态items:[{name:'红色',check:true},{name:'黄色',check:false},{name:'绿色',check:false},{name:'蓝色',check:true}]}}handleCheckAll(){ //全选let {checkAll,items} = this.state;items.map((item,i)=>{return item.check = !checkAll;})this.setState({checkAll:!checkAll,  //取全选当前反的状态items:items})}handleCheckItem(item){ //当前的选项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,  //取全选当前反的状态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(重构-多组件)

<!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, //全选的状态items:[{name:'红色',check:true},{name:'黄色',check:false},{name:'绿色',check:false},{name:'蓝色',check:true}]}}handleCheckAll(){  //全选let {checkAll,items} = this.state;items.map((item,i)=>{return item.check = !checkAll;})this.setState({checkAll:!checkAll,  //取全选当前反的状态items:items})}handleCheckItem(item){  //当前的选项   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,  //取全选当前反的状态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发生变化时触发//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;   //父的值发生了变化，二种处理方式，一：添加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>

React学习：ref调用、组件封装调用-学习笔记相关推荐

react如何在父组件中调用子组件事件
父组件是如何使用子组件的事件的,下边数值累加的例子类组件将子组件的this传到父组件,给父组件添加一个属性,值为this,之后就可以通过父组件的属性调用子组件的事件了 import React,{ ...
基于使用学习排序算法的Web服务学习的个性化的决策战略
摘要----为了从类似的服务列表中进行功能上的选择,用户往往需要根据多个QoS准则做出他们的决定,它们需要对目标服务.在这个过程中,不同的用户可能遵循不同的决策策略,有些是补偿性的,在这个补偿中在所有 ...
react组件卸载调用的方法_好程序员web前端培训分享React学习笔记（三）
好程序员web前端培训分享React学习笔记(三),组件的生命周期 React中组件也有生命周期,也就是说也有很多钩子函数供我们使用, 组件的生命周期,我们会分为四个阶段,初始化.运行中.销毁.错误处 ...
Vue学习（组件的定义及调用、路由）-学习笔记
文章目录 Vue学习(组件的定义及调用.路由)-学习笔记 Vue学习(组件的定义及调用.路由)-学习笔记可见代码参考学习:https://gitee.com/monkeyhlj/vue-learni ...
react 调用组件方法_React源码分析1 — 组件和对象的创建（createClass，createElement）...
1 组件的创建学习了半年前端了,感觉前端的水确实也很深.做安卓的时候就对React-Native比较感兴趣,开发H5时也使用了一段时间的ReactJS.所以决定好好分析下它的源码.文章中有不对的地方 ...
Vue学习小案例--分页组件封装
文章目录 Vue学习小案例--分页组件封装修改成Vue(使用组件) Vue学习小案例–分页组件封装 index.html <!DOCTYPE html> <html lang=&q ...
调用http_【学习充电】直观讲解一下 RPC 调用和 HTTP 调用的区别！
很长时间以来都没有怎么好好搞清楚RPC(即Remote Procedure Call,远程过程调用)和HTTP调用的区别,不都是写一个服务然后在客户端调用么?这里请允许我迷之一笑~Naive!本文简单 ...
Dubbo学习记录(十六)--服务调用【二】 - Invoker的调用、ProxyFactory、Protocol、Filter，Exchanger, Transporter扩展点
服务调用的前置学习[二] 服务调用涉及到的东西比较多, 需要一个个的理解透彻, 最终才能串起来: 服务端DubboInvoker的包装 DubboInvoker的生成是在服务导出的过程中创建的:由于D ...
react组件卸载调用的方法_React调用子组件方法与命令式编程误区
本文将阐述以下内容: 调用DOM元素方法调用React子组件方法的两种直接方案自省组件结构设计是否合理 -- 探讨声明式编程与命令式编程在React开发中的问题调用React子组件方法的最佳方案 ...

React学习：ref调用、组件封装调用-学习笔记

文章目录

React学习：ref调用、组件封装调用-学习笔记

ref调用-string形式

ref调用-回调形式（官方推荐）

ref调用-父调子

组件封装调用demo（全选）

demo1(单组件)

demo2(重构-多组件)

React学习：ref调用、组件封装调用-学习笔记相关推荐

最新文章

热门文章