内容简介:在函数组件中要获取子组件的数据,需要两步骤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中方式》,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对 码农网 的支持!
猜你喜欢:- React 穿透获取被高级组件装饰的目标组件实例
- android获取应用四大组件列表以及详细信息
- vue组件props传值,对象获取不到的问题
- 设计稿生成代码核心技术揭秘:获取图片中前端组件的位置信息
- UWeb v1.5.4 专业版发布,完善字典组件,实现动态获取
- UWeb v1.6.2 专业版发布,增强框架字典组件,根据标识动态获取数据源
本站部分资源来源于网络,本站转载出于传递更多信息之目的,版权归原作者或者来源机构所有,如转载稿涉及版权问题,请联系我们。
JavaScript开发王
张亚飞 / 2008-6 / 65.00元
《网站开发专家·JavaScript开发王》详细介绍使用JavaScript脚本开发应用程序,并融合在网页中实现动态网页,内容也包含DHTML和AJAX。这《网站开发专家·JavaScript开发王》有严格的逻辑性,不论是JavaScript语言、DHTML,还是AJAX,《网站开发专家·JavaScript开发王》首先帮助用户建立首要的、基础的正确认知,然后通过实例,说明如何利用JavaScri......一起来看看 《JavaScript开发王》 这本书的介绍吧!