React父組件調用子組件

通點擊父組件按鈕調用子組件的方法

父組件：

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);