onRef

实现父组件获取子组件实例

class Parent extends Component{childFunc(){ if(this.child){ // 判断this.child值// this.child 指向 子组件实例// 调用子组件方法this.child.func('123') console.log('父组件调用子组件方法')}}bindChild(child){// 接收子组件实例，指向this.childthis.child = child}render(){return(<div onClick={this.childFunc}> // 点击尝试调用子组件方法// 通过onRef属性将引用子组件实例方法传给子组件<Child onRef={this.bindChild}></ChildPage></div>)}
}class Child extends Component{constructor(props){super(props)this.state = '000' if(props.onRef){// 如果接收到onRef方法，则调用该方法并传入子组件this指针// 子组件this指针被挂载到父组件this.child上props.onRef(this)      }  }func = arg => {setState(arg)}render(){return <span>{this.state}<span>}
}

ref

获取组件真实DOM

// 类组件
class NameForm extends React.Component {constructor(props) {super(props);this.handleSubmit = this.handleSubmit.bind(this);// 使用React.createRef方法来创建refthis.inputRef = React.createRef();}handleSubmit(event) {// 通过ref的current属性获取真实DOMalert(this.inputRef.current.value);event.preventDefault();}render() {return (<form onSubmit={this.handleSubmit}><label>Name:// 通过组件ref属性将组件的真实DOM引用添加到this.inputRef <input type="text" ref={this.inputRef} /> // input 为 非受控组件</label><input type="submit" value="Submit" /></form>);}
}

// 函数组件
function NameForm(props) {// 使用useRef方法来创建refconst inputRef = useRef(null);function handleSubmit(event) {// 通过ref的current属性获取真实DOMalert(inputRef.current.value);event.preventDefault();}return (<form onSubmit={handleSubmit}><label>Name:// 通过组件ref属性将组件的真实DOM引用添加到this.inputRef <input type="text" ref={inputRef} /> // input 为 非受控组件</label><input type="submit" value="Submit" /></form>);
}

ref 的值根据节点的类型而有所不同：

当 ref 属性用于原生组件时， ref 接收组件的真实DOM 作为其 current 属性。
当 ref 属性用于类组件时，ref 接收组件实例作为其 current 属性。
函数组件没有实例，不能使用 ref 属性。

通过ref保存的数据更改时不会触发重新渲染，适合用来保存如非受控组件、计时器实例等不关联页面渲染操作的可变引用。

React: onRef 和 ref相关推荐

React学习：ref调用、组件封装调用-学习笔记
文章目录 React学习:ref调用.组件封装调用-学习笔记 ref调用-string形式 ref调用-回调形式(官方推荐) ref调用-父调子组件封装调用demo(全选) demo1(单组件) d ...
react中使用ref获取
1.react 函数组件使用useRef获取input框中的值 import React, { useRef } from "react";export default funct ...
React中使用ref
一.如何使用ref 在React的开发模式中,通常情况下不需要.也不建议直接操作DOM原生,但是某些特殊的情况,确实需要获取到DOM进行某些操作: 管理焦点,文本选择或媒体播放: 触发强制动画: 集成 ...
React 学习笔记 —— Ref Hook
用以下三种方式创建 Ref 都可以 import React from 'react'export default function Count () {const [count ,setCount] ...
React之回调ref中回调执行次数的问题
<!DOCTYPE html> <html> <head> <meat charset="UTF-8"> <title> ...
React中的ref属性的使用
1. 字符串形式的ref import React, { Component } from 'react'export default class index extends Component {s ...
浅谈react hook （ ref）
import React ,{useRef,useState,PureComponent} from "react"; import ReactDOM from "rea ...
React(8)-组件ref引用
目录 1.组件form 受控组件及其特点非受控组件及其特点模拟:简单受控组件表单 input两个方向绑定数据: 模拟:复杂(真实)受控组件表单(form里面有多种数据输入) 注意:handleCh ...
React中使用 ref 和 findDomNode
对于 React 组件来说,refs 会指向一个组件类的实例,所以可以调用该类定义的任何方法. 如果需要访问该组件的真实 DOM,可以用 ReactDOM.findDOMNode 来找到 DOM 节点 ...

React: onRef 和 ref

onRef

ref

React: onRef 和 ref相关推荐

最新文章

热门文章