标签：current return focus React 中父 parentRef props 组件

一、类组件的情况下

• 1、定义父组件(直接使用ref)

  export default class UserRef1 extends Component {
    constructor(props) {
      super(props);
      this.child = React.createRef();
    }
    focus = () => {
      console.log(this.child.current.inputRef.current.value);
      this.child.current.inputRef.current.focus();
    }
    render() {
      return (
        <div>
          <Child ref={this.child} />
          <button onClick={this.focus}>获取焦点</button>
        </div>
      )
    }
  }
  
  

• 2、子组件中

  class Child extends Component {
    constructor(props) {
      super(props);
      this.state = {
        name: '哈哈'
      }
      this.inputRef = React.createRef();
    }
    render() {
      return (
        <input type="text" value={this.state.name} onChange={(e) => this.setState(e.target.value)} ref={this.inputRef} />
      )
    }
  }
  
  

二、函数组件

在函数组件中要获取子组件的数据,需要两步骤1.将ref传递到子组件中,2.需要使用forwardRef对子组件进行包装

• 1、父组件

  export default () => {
    const parentRef = useRef();
    function focusHander() {
      console.log(parentRef);
      parentRef.current.focus();
      parentRef.current.value = '哈哈';
    }
    return (
      <>
        <ForwardChild ref={parentRef} />
        <button onClick={focusHander}>获取焦点</button>
      </>
    )
  }
  
  

• 2、子组件中

  function Child(props, parentRef) {
    console.log(props);
    return (
      <>
        <input type="text" ref={parentRef} />
      </>
    )
  }
  /**
   * 使用forwardRef将ref直接传递进去
   */
  let ForwardChild = forwardRef(Child);
  
  

三、优化(使用useImperativeHandle)

上面的方式都会将组件中全部的数据暴露出去,有时候我们想只想暴露出一部分数据

• 1、子组件的代码

  import React, { useState, useRef, useImperativeHandle, forwardRef } from 'react'
  
  function Child(props, parentRef) {
    const inputRef = useRef();
    useImperativeHandle(parentRef, () => {
      // return返回的值就可以被父组件获取到,没返回的值就获取不到
      return {
        focus() {
          inputRef.current.focus();
        }
      }
    })
    return (
      <>
        <p>{props.name}</p>
        <input type="text" ref={inputRef} />
      </>
    )
  }
  
  let ForwardChidl = forwardRef(Child);
  
  

• 2、父组件的代码

  export default () => {
    const parentRef = useRef();
  
    const focusHandler = () => {
      parentRef.current.focus();
    }
    return (
      <>
        <ForwardChidl ref={parentRef} name={'你好'} />
        <button onClick={focusHandler}>获取焦点</button>
      </>
    )
  }
  
  

标签：current,return,focus,React,中父,parentRef,props,组件
来源： https://www.cnblogs.com/ygunoil/p/16422148.html

本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享；
2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关；
3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关；
4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除；
5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。