React - 从子组件的外部调用父函数

Question

我想从类函数外部获取子组件文件

函数 saveSurveyData(survey) 需要调用父函数handleTabs()

class Parent extends React.Component {

        constructor(props){
            super(props);       
            this.handleTabs = this.handleTabs.bind(this);
        }

         handleTabs = () => {
            console.log('expecting call from Child component - function 
         }


         render() {   
            return (
                <Tab eventKey={1} title="child">
                    <Child handleTabs={this.handleTabs} />
                </Tab> 

            )
        }
    }

// Child Component

import React from 'react';
    import * as Survey from "survey-react";

    var surveyValueChanged = function (sender, options) {
        saveSurveyData(survey);
    };
    // critical surveyjs function
    function saveSurveyData(survey) {
        var data = survey.data;

        //need to call handleTabs() (parent) in this function which is outside of Child Component Class
        //handleTabs={this.handleTabs}
        this.handleTabs();  // HOW ?
    }

    class Child extends React.Component {
        constructor(props){
            super(props);

        }

        render()
            {
                return(
                    <Survey.Survey model={survey}
                        onValueChanged={surveyValueChanged} />
                )
            }
                }

我一直在尝试 ref、props 和 state - 我只是不明白如何在子组件之外执行此操作。

Answer 1

<Child keyName={this.handleTabs} />

在父组件中，您将其作为道具传递（handleTabs 是父组件中的方法） 现在要访问 Child 组件中的任何 props 值，您可以直接使用（我已经更改了键名，以便您有清晰的概念）

//你想使用handleTabs（因为它是基于类的组件使用这个关键字）

this.props.KeyName();

您也不需要在父组件中绑定句柄选项卡，因为您创建了一个不需要绑定的箭头函数。 对于普通函数，你需要绑定 this。（所以绑定你的子函数）

import React from 'react';
import * as Survey from "survey-react";

class Child extends React.Component {
    constructor(props){
        super(props);
        this.saveSurveyData = this.saveSurveyData.bind(this);
        this.surveyValueChanged = this.surveyValueChanged.bind(this);
    }
surveyValueChanged(sender, options) {
    this.saveSurveyData(survey);
};

 saveSurveyData(survey) {
    var data = survey.data;
    this.props.handleTabs(); 
    console.log(this.props.handleTabs()) 
}



    render()
        {
            return(
                <Survey.Survey model={survey}
                    onValueChanged={this.surveyValueChanged} />
            )
        }
            }

Answer 2

handleTab 被传递给 this.props。您应该将surveyValueChanged 和saveSurveyData 放置到子组件中。

示例：

class Parent extends React.Component {

    constructor(props){
        super(props);       
        this.handleTabs = this.handleTabs.bind(this);
    }

     handleTabs = () => {
        console.log('expecting call from Child component - function 
     }


     render() {   
        return (
            <Tab eventKey={1} title="child">
                <Child handleTabs={this.handleTabs} />
            </Tab> 

        )
    }
}

/// 
// Child
import React from 'react';
import * as Survey from "survey-react";



class Child extends React.Component {
    constructor(props){
        super(props);

    }

    surveyValueChanged = (sender, options) => {
       this.saveSurveyData(survey);
    };
    // critical surveyjs function
    saveSurveyData = (survey) => {
       var data = survey.data;       
       this.props.handleTabs();
    }

    render()
        {
            return(
                <Survey.Survey model={survey}
                    onValueChanged={this.surveyValueChanged} />
            )
        }

}