React16.8中父組件獲取子組件數據的3中方式

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> ) } } 複製代碼

• 二、子組件中

  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} /> ) } } 複製代碼

2、函數組件

在函數組件中要獲取子組件的數據,須要兩步驟1.將ref傳遞到子組件中,2.須要使用forwardRef對子組件進行包裝

• 一、父組件

  export default () => {
    const parentRef = useRef();
    function focusHander() {
      console.log(parentRef);
      parentRef.current.focus();
      parentRef.current.value = '哈哈';
    }
    return (
      <>
        <ForwardChild ref={parentRef} />
        <button onClick={focusHander}>獲取焦點</button>
      </>
    )
  }
  複製代碼

• 二、子組件中

  function Child(props, parentRef) {
    console.log(props);
    return (
      <>
        <input type="text" ref={parentRef} />
      </>
    )
  }
  /**
   * 使用forwardRef將ref直接傳遞進去
   */
  let ForwardChild = forwardRef(Child);
  複製代碼

3、優化

上面的方式都會將組件中所有的數據暴露出去,有時候咱們想只想暴露出一部分數據

• 一、子組件的代碼

  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);
  複製代碼

• 二、父組件的代碼

  export default () => {
    const parentRef = useRef();
  
    const focusHandler = () => {
      parentRef.current.focus();
    }
    return (
      <>
        <ForwardChidl ref={parentRef} name={'你好'} />
        <button onClick={focusHandler}>獲取焦點</button>
      </>
    )
  }
  複製代碼