React--refs回调

React--refs回调,第1张

refs创建 & 挂载

官方文档:https://react.docschina.org/docs/refs-and-the-dom.html

React单向数据流中,props是父组件与子组件交互的唯一方式,要修改一个子组件,一般只能通过更新props重新渲染。在某些情况下,需要在典型数据流之外强制修改子组件,被修改的子组件可能是一个React组件实例,也可能是一个DOM元素

ref属性附加到React元素上,以便访问。可以附加到以下几种节点:

使用React.createRef()方法创建一个ref对象实例,附加到HTML元素上,接收底层DOM元素作为其current属性挂载到class组件上,其current指向该类组件实例不能挂载到函数组件上,因为函数组件没有实例

挂载到HTML元素上比较常见,值得了解的是挂载在class组件上

示例1:

import React from "react";

class CustomTextInput extends React.Component {

  constructor (props) {
    super(props)
    this.textInputRef = React.createRef()
    this.focusTextInput = this.focusTextInput.bind(this)
  }

  focusTextInput() {
    this.textInputRef.current && this.textInputRef.current.focus()
  }

  render () {
    return (
      <>
        <input ref={this.textInputRef} />
      </>
    )
  }
}

export default class Home extends React.Component {

  constructor (props) {
    super(props)
    this.inputRef = React.createRef()
  }

  componentDidMount() {
    this.inputRef.current.focusTextInput()
  }

  render() {
    return (
      <>
        <CustomTextInput ref={this.inputRef} />
      </>
    )
  }
}

代码解释:

Home组件中创建了一个inputRef对象实例,它被附加在CustomTextInput组件实例上,**inputRef.current**指向该组件实例CustomTextInput中的内容,需要关注focusTextInput()方法,它修改的内容是:input输入框获取焦点当父级组件componentDidMount,使用inputRef.current访问子组件,并调用子组件的方法,获取焦点 refs回调

不仅可以使用React.createRef()方法创建ref实例引用React元素,还可以使用一个回调函数,绑定React元素

示例2:

import React from "react";

class CustomTextInput extends React.Component {

  render () {
    return (
      <>
        <input ref={this.props.inputRef}/>
      </>
    )
  }
}

export default class Home extends React.Component {

  constructor (props) {
    super(props)
    this.inputRef = null
    this.setInputRef = element => this.inputRef = element
    this.focusTextInput = this.focusTextInput.bind(this)
  }

  focusTextInput() {
    this.inputRef && this.inputRef.focus()
  }

  render() {
    return (
      <>
        <CustomTextInput inputRef={this.setInputRef} />
        <hr />
        <button onClick={this.focusTextInput}>聚焦</button>
      </>
    )
  }
}

代码解释:

将输入框子组件的一些逻辑全部都提升到父组件中控制,子组件差不多只用于展示了在父组件中定义了this.setInputRef = element => this.inputRef = element函数,而且将该函数传递给CustomTextInputinputRef属性在CustomTextInput中又把父级的inputRef传递给inputref当点击【聚焦】按钮时,输入框成功聚焦

需要知道的只有一点,如果ref属性接收的是一个函数,在组件挂载后,React元素(组件或者HTML元素)会作为refs回调函数的第一个参数传递,因此this.inputRef最终指向了CustomTextInput组件内的input元素

React 将在组件挂载时,会调用 ref 回调函数并传入 DOM 元素,当卸载时调用它并传入 null。在 componentDidMount 或 componentDidUpdate 触发前,React 会保证 refs 一定是最新的

欢迎分享,转载请注明来源:内存溢出

原文地址: http://outofmemory.cn/web/1297966.html

(0)
打赏 微信扫一扫 微信扫一扫 支付宝扫一扫 支付宝扫一扫
上一篇 2022-06-10
下一篇 2022-06-10

发表评论

登录后才能评论

评论列表(0条)

保存