React父组件调用子组件

最新推荐文章于 2025-08-23 02:53:08 发布

转载最新推荐文章于 2025-08-23 02:53:08 发布 · 80 阅读

0 ·

CC 4.0 BY-SA版权

原文链接：http://www.cnblogs.com/0828-li/p/11011601.html

文章标签：

#javascript #ViewUI

本文介绍如何在React中通过引用和回调实现父组件调用子组件方法及获取子组件值，适用于需要跨组件交互的场景。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

通点击父组件按钮调用子组件的方法

父组件：

import React, {Component} from 'react';
import ChildComponent from './child';
export default class ParentComponent extends Component {
    render() {
        return(
            <div>
                <ChildComponent onRefChild={this.onRefChild} />
                <button onClick={this.clickParent.bind(this)} >{'点击'}</button>
            </div>
        )
    }

    onRefChild = (ref) => {
        this.child = ref
    }

    clickParent = (e) => {
        this.child.childMethods()
    }

}

子组件：

import React, {Component} from 'react';
export default class ParentComponent extends Component {
    componentDidMount(){
        this.props.onRefChild(this)
    }

    childMethods = () => alert('子组件被执行了')

    render() {
        return (<div>我是子组件</div>)
    }

}

另外一种情况，子组件使用了 'rc-form';

父组件：

import React from 'react';
import ChildComponent from './child'
class Index extends React.Component {
    startCreat = () => {
        // 获取到子组件的值
        let values = this[`formRef`].getItemsValue();
    }
    render(){
        return (
            <div>
                <ChildComponent wrappedComponentRef={(form) => this[`formRef`] = form}/>
                <button onClick={this.startCreat.bind(this)}>{'点击获取子组件值'}</button>
            </div>
        )
    }
}
export default Index;

子组件：

import React from 'react';
import { createForm } from 'rc-form';
class ChildComponent extends React.Component {
    // 父组件获取form内值
    getItemsValue = () => {
        const values= this.props.form.getFieldsValue(); 
        return values;
    }
    render(){
        const { getFieldProps } = this.props.form;
        return (
            <div
                {...getFieldProps('key',{
                    initialValue: 1
            })}
            >
            </div>
        )
        
    }
}
export default createForm()(ChildComponent);

转载于:https://www.cnblogs.com/0828-li/p/11011601.html