Refs含义

允许访问真实DOM
React数据流：通过props来实现父子组件的交互
Refs允许强制修改子组件

// 1. 构造器离添加实例属性 this.ref = React.createRef()
// 2. 组件上绑定ref ref={this.ref}
// 3. 使用：this.ref.current

input

class MyInput extends React.Component {constructor(props) {super(props)this.inputRef = React.createRef()}state = {value: '123'}// 聚焦 失焦inputFocus = () => {const oInput = this.inputRef.currentoInput.focus()oInput.value = ''}inputBlur = () => {const oInput = this.inputRef.currentoInput.blur()oInput.value = ''}changeInputValue = (e) => {this.setState({value: e.target.value})}render() {return (<div><inputtype="text"ref={this.inputRef}value={this.state.value}onChange={this.changeInputValue}/><button onClick={this.inputFocus}>聚焦</button><button onClick={this.inputBlur}>失焦</button></div>)}
}

video

class MyVideo extends React.Component {constructor(props) {super(props);this.videoRef = React.createRef();}videoPlay = (operation) => {const oVideo = this.videoRef.currentoperation === 'play' ? oVideo.play() : oVideo.pause()}render() {return (<div><video src="https://www.w3school.com.cn/i/movie.ogg"width="300"height="200"controlsref={this.videoRef}></video><div><button onClick={() => this.videoPlay('play')}>播放</button><button onClick={() => this.videoPlay('pause')}>暂停</button></div></div>)}
}

强制动画

class MyBox extends React.Component {constructor(props) {super(props)this.boxRef = React.createRef()}growBox = () => {const oBox = this.boxRef.currentoBox.style.width = '400px'oBox.style.height = '400px'oBox.style.backgroundColor = 'skyblue'}render() {return (<><divstyle={{width: 200 + 'px',height: 200 + 'px',backgroundColor: 'orange',transition: 'all 1s'}}ref={this.boxRef}></div><button onClick={this.growBox}>变大</button></>)}
}

引入jQuery

    growBox = () => {const $box = $(this.boxRef.current)console.log('jquery dom对象', $box)$box.animate({width: '400px',height: '400px',})}

模态框状态提升

class Modal extends React.Component {constructor(props) {super(props)this.modalRef = React.createRef()}render() {return (<divref={this.modalRef}style={{width: '300px',border: '1px solid #000',display: this.props.toOpen ? 'block' : 'none'}}><h1>This is a Modal</h1><p>This is a super Modal</p></div>)}
}
class App extends React.Component {state = {toOpen: false,}changeStatus = (toOpen) => {this.setState({toOpen})}render() {return (<><Modal toOpen={this.state.toOpen} /><button onClick={() => this.changeStatus(true)}>打开</button><button onClick={() => this.changeStatus(false)}>关闭</button></>)}
}

23 Refs的应用场景与选用思考相关推荐

23种设计模式应用场景
23种设计模式应用场景创建型模式工厂方法模式: 原型模式:clone/fork子线程建造者模式:框架组件实例化抽象工厂模式:业务+反射单例模式:只读单实例场景结构型模式装饰模式:换装软件 ...
for-forEach-stream三种遍历方法执行效率比较与选用思考
文章目录想法设计实现结论建议想法在JDK-8中,新添加了很多的方法,比如说现在我所说的forEach,该方法是用于集合遍历的,其方式相当于传统的for循环遍历方式,只是与其不同之处就 ...
UI一揽子计划 23 (动画的使用场景、UIView动画、CGAffineTransform2D仿射变换、CALayer、CAAnimation、)
在iOS 中的动画是指一些视图上的过渡效果,合理利用动画能提高用户体验. 一. UIView动画 1). UIView动画块的使用 ([UIView beginAnimations: nil cont ...
6 useRef、useImperativeHandle
useRef在每次执行时返回的是同一个引用(返回的ref对象在组件的整个生命周期内保持不变) 在函数组件中可以使用useRef和createRef 但useRef性能比createRef好,快在类组 ...
场景，或许才是未来空间设计的关键词，可能是最接近元宇宙的空间体验？ | 浅空间专栏...
‍‍ @all 给大家介绍下 @蔡锕是我们新专栏「浅空间」的作者,他将分享在场景与空间的探索.欢迎大家一起探索~ ☀️ shadow 蔡锕大家好,我是蔡锕,北建大建筑学本科,即将就读 TU Ber ...
AI如何与票据交易场景结合
本文基于之前做过的票据交易服务平台,思考AI技术如何与票据交易场景相结合.应用OCR和NLP技术,可以辅助票据录入和票据签收,从而提高企业的工作效率.本文按以下几个部分作说明: 目录一.票据交易服务 ...
揭秘华为数字化转型框架：1套方法、4类场景、3个平台能力
导读:详解1套方法.4类场景.3个平台能力. 作者:华为企业架构与变革管理部来源:大数据DT(ID:hzdashuju) 2016年,华为公司数字化转型变革规划汇报通过,一系列的变革项目由变革指导委 ...
京东金融副总裁曹鹏：不做“浮冰”，深挖AI技术和场景 | AI聚变
栏目简介:自动驾驶.教育.金融.医疗-如你所知,AI 如毛细血管一般正渗透到各行各业,人们为"AI+"可能带来的爆炸性能量而奔走呼号,但也更愿意看到脚踏实地的技术实现和商业落地.为 ...
不做“浮冰”，深挖AI技术和场景
2020-04-01 17:19:49 典型的技术人士似乎都有一种"Talk is cheap, show me the code."的气质,在与京东金融技术副总裁曹鹏交谈的过程中 ...

23 Refs的应用场景与选用思考

Refs含义

input

video

强制动画

引入jQuery

模态框状态提升

23 Refs的应用场景与选用思考相关推荐

最新文章

热门文章

23 Refs的应用场景与选用思考

Refs含义

input

video

强制动画

引入jQuery

模态框 状态提升

23 Refs的应用场景与选用思考相关推荐

最新文章

热门文章

模态框状态提升