onRef在react中的使用

组件间通信除了props外还有onRef方法，不过React官方文档建议不要过度依赖ref。本文使用onRef语境为在表单录入时提取公共组件，在提交时分别获取表单信息。

原理

当在子组件中调用onRef函数时，正在调用从父组件传递的函数。this.props.onRef（this）这里的参数指向子组件本身，父组件接收该引用作为第一个参数：onRef = {ref =>（this.child = ref）}然后它使用this.child保存引用。之后，可以在父组件内访问整个子组件实例，并且可以调用子组件函数。

下面demo中点击父组件按钮可以获取子组件全部信息，包括状态和方法。注意：点击和未点击子组件按钮，获取的信息是不一样的。

import React from 'react';
// 父组件
class Parent extends React.Component {testRef=ref=>{this.child = refconsole.log(ref) // 获取整个Child元素}onClickParent=()=>{alert(this.child.state.info) // 通过this.child可以拿到child所有状态和方法}render() {return <div><Child onRef={this.testRef} /><button onClick={this.onClickParent}>父组件按钮</button></div>}
}
// 子组件
class Child extends React.Component {constructor(props) {super(props)this.state = {info:'子组件-------'}}componentDidMount(){this.props.onRef(this)console.log(this) // 将child传递给this.props.onRef()方法}onclickChild=()=>{this.setState({info:'通过父组件按钮获取到子组件信息---'})} render(){return <button onClick={this.onclickChild}>子组件按钮</button>}
}

实战

在实际项目当中，一个父组件可能会有多个子组件，而且在不同的条件下，父组件会使用到子组件的方法，这时会考虑着使用onRef来调用子组件的方法。

下面demo展示的是：父组件index页面有两个tab标签页的子组件，每个tab页离开的时候或切换的时候，在不点击保存按钮的基础上，要对上一个操作的页面的内容进行保存（已经在每个tab页面封装的保存的方法savePage）

Index父组件页面

import React from 'react';
import {Tabs} from 'antd';
import $state from './state';
import One from 'xx';
import Two from 'xx';
import { observer } from 'mobx-react';const { TabPane } = Tabs;@observer
class Index extends React.Component {constructor(props) {super(props);this.state = {};}componentDidMount() {$state.activeKey = '1';document.getElementsByClassName('main-content')[0].scrollTop = 0;//不管怎么切换页面，保持滚动条的位置一直在顶部}toggleTab = (key) => {$state.activeKey = key;};onRef1 = (ref) => {this.child1 = ref;};onRef2 = (ref) => {this.child2 = ref;};componentWillUnmount = () => {//离开哪一页就保存哪一页的信息if (this.child1 && $state.activeKey === '1') {this.child1.savePage($state.activeKey);}if (this.child2 && $state.activeKey === '2') {this.child2.savePage($state.activeKey);}};render() {return (<div><Tabs activeKey={$state.activeKey} onChange={this.toggleTab}><TabPane tab="tab1" key="1">{$state.activeKey === '1' ? <One onRef={this.onRef1} /> : ''//清除缓存，只有切换到当前页才展示对应的组件，离开该页就清除掉组件}</TabPane><TabPane tab="tab2" key="2">{$state.activeKey === '2' ? <Two onRef={this.onRef2} /> : null}</TabPane></Tabs></div>);}
}
export default Index;

子组件页面

export default class One extends React.Component {constructor(props) {super(props)this.state = {}}componentDidMount(){this.props.onRef(this)//将One组件中的状态方法传递给this.props.onRef()方法}//保存页面的方法savePage=()=>{}render(){return xxxx}
}

onRef在react中的使用相关推荐

React（74）--onRef在react中的使用
当在子组件中调用onRef函数时,正在调用从父组件传递的函数.this.props.onRef(this)这里的参数指向子组件本身,父组件接收该引用作为第一个参数:onRef = {ref => ...
React工作74:onRef在react中的使用
当在子组件中调用onRef函数时,正在调用从父组件传递的函数.this.props.onRef(this)这里的参数指向子组件本身,父组件接收该引用作为第一个参数:onRef = {ref => ...
处理 react_【学习教程】React 中阻止事件冒泡的问题
来源 | https://www.cnblogs.com/Wayou/p/react_event_issue.html 在正式开始前,先来看看 js 中事件的触发与事件处理器的执行. js 中事件的监 ...
react中ref的使用
在react中获取真实dom的时候就需要用到ref属性,具体使用如下 var MyComponent = React.createClass({handleClick: function() {con ...
react中使用构建缓存_如何在React中构建热图
react中使用构建缓存 Heat maps are a great way of visualizing correlations among two data sets. With colors ...
react中使用构建缓存_通过构建海滩度假胜地网站，了解如何使用React，Contentful和Netlify...
react中使用构建缓存 In this full course from John Smilga you will learn React by building a beach resort we ...
创建react应用程序_通过创建食谱应用程序来学习在React中使用API
创建react应用程序 Learn how to use external APIs with React and React Router in a full tutorial from Hamza ...
react中纯函数_如何在纯React中创建电子邮件芯片
react中纯函数 by Andreas Remdt 由Andreas Remdt 如何在纯React中创建电子邮件芯片 (How to create email chips in pure Reac ...
如何在React中使用Typescript
TypeScript can be very helpful to React developers. TypeScript对React开发人员可能非常有帮助. In this video, Ben ...

onRef在react中的使用

原理

实战

onRef在react中的使用相关推荐

最新文章

热门文章