react.js-从父组件调用函数

Question

我正在尝试从父级调用子级组件中的handleToggle()函数，尽管看起来一切都很好， this.clickAddGoal(stageContent); 显示为undefined

class ParentClass extends Component
{
    constructor(props, context)
    {
        super(props, context);enter code here
        this.state = {stageContent: ''};
        this.getStageContent = this.getStageContent.bind(this);
    }

    getStageContent = (stageId) =>
    {
        let stageContent = '';

        switch (stageId)
       {
        case 1:
            stageContent = this.props.data.PPYPL;
            break;
        case 2:
            stageContent = this.props.data.I;
            break;
        case 3:
            stageContent this.props.data.DH;
            break;
        case 4:
            stageContent = this.props.data.R;
            break;
    }
    this.clickAddGoal(stageContent);
    this.setState({stageContent: stageContent});
}

renderComponents = () =>
{
    return (
        <div>
            <ChildComponent
                subjectContent={this.props.data.name}
                onRef={click => this.clickAddGoal = click}
            />
        </div>
    );
    }
}

render()
{
    return (
        <div style={style}>
            <div className="performance-graph">
                <div className="container">
                    <div className="row">
                        <div className="col-xs-3">
                            {}
                        </div>
                    </div>
                    <br/>
                    <div className='subject-unit'>
                        <StageBar
                            id={this.props.data.id}
                            subjectCode={this.props.data.area.color}
                            progressPercentage={this.props.data.percentageProgress}
                            onGetStage={this.getStageContent}
                        />
                        {this.renderComponents()}
                    </div>
                </div>
            </div>
        </div>
        );
    }
}

const mapStateToProps = (state) =>
{
    return {
        data: state.planAreaUnitRed,
    };
};

export default connect(mapStateToProps, null)(ParentClass);`

子组件

import React, {Component} from 'react';
import {connect} from 'react-redux'


class ChildComponent extends Component
{
    constructor(props)
    {
        super(props);
        this.state = {editUnit: false, viewContentStage: false, autonomy:''};
    }
    componentWillMount()
    {
        this.handleToggle()
    }
    componentDidMount() {
        this.props.onRef(this.handleToggle);
    } 
    handleToggle = () =>
    {
        this.props.clearStageContent();
        this.props.stageContent!=='' this.props.loadContentUnitStage(this.props.stageContent):'';
    }

    render()
    {
        return (
            <div className='unit-content'>
                <div className="container">
                    <div className="row">
                        <h3>
                            {this.props.subjectContent}
                        </h3>    
                        <div style={{padding: '50px', fontSize: '24px'}}>
                            {this.props.stageContentData.content}
                        </div>
                    </div>
                </div>
            </div>
        );
    }
}

const mapStateToProps = (state) =>
{
    return {
        stageContentData: state.planAreaUnitRed.stageContent,
    };
};
const mapDispatchToProps = (dispatch) =>
{
    return {
        loadContentUnitStage: (hash) =>
        {
            dispatch(planAreaUnitActions.fetchContentUnitStage(hash))
        },
    };
};
export default connect(mapStateToProps, mapDispatchToProps)(UnitContent);

我做错了什么吗？

Answer 1

我知道的一种方法是，如果您尝试从父组件访问子组件，则可以将引用应用于子组件本身。 喜欢

<ChildComponent
    subjectContent={this.props.data.name}
    ref={click => this.clickAddGoal = click}
/>

因此，ref clickAddGoal包含对基础子组件的引用。 然后，您可以从父组件处理它，例如

 this.clickAddGoal.handleToggle();