React16.8中父组件获取子组件数据的3中方式

栏目: IOS · Android · 发布时间: 5年前

内容简介:在函数组件中要获取子组件的数据,需要两步骤1.将上面的方式都会将组件中全部的数据暴露出去,有时候我们想只想暴露出一部分数据
  • 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);
    复制代码

三、优化

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

  • 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>
        </>
      )
    }
    复制代码

以上所述就是小编给大家介绍的《React16.8中父组件获取子组件数据的3中方式》,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对 码农网 的支持!

查看所有标签

猜你喜欢:

本站部分资源来源于网络,本站转载出于传递更多信息之目的,版权归原作者或者来源机构所有,如转载稿涉及版权问题,请联系我们

从零开始做运营

从零开始做运营

张亮 / 中信出版社 / 2015-11-1 / 49.00元

运营是什么?怎样做运营?产品和运营是什么关系?我是否适合从事互联网运营?为什么我做的运营活动收效甚微? 在互联网大热的今天,互联网运营成为一个越来越重要的岗位,事关网站、产品的发展与存亡。很多年轻人带着对互联网的热情投身到这个行业,却发现自己对这个行业所知甚少,对互联网运营更加陌生,甚至有一些有志于从事互联网运营的人,因为对运营缺乏了解而难以确定自己的职业发展方向。本书的出发点就在于此,它将......一起来看看 《从零开始做运营》 这本书的介绍吧!

JS 压缩/解压工具
JS 压缩/解压工具

在线压缩/解压 JS 代码

RGB转16进制工具
RGB转16进制工具

RGB HEX 互转工具

SHA 加密
SHA 加密

SHA 加密工具