Question

我的主要组件上有一个按钮，当它点击它打开一个“Approval pannel”时，当点击OK时，我正在调用主要组件的回调函数并做一些逻辑。

我想传递回调函数（我的理由），问题是当调用回调函数时，道具和状态是未定义的。

为什么会这样？如果缺少任何信息，请告诉我。

我在这里添加了部分代码：

class MainComponent extends React.Component {
     constructor(props){
        currentActionConfig = {onOkClick: this.onGenericApprovalOkClicked, ...};
     }

    onCommandApprovalOkClicked(commandText){
        console.log(this.props); <- 'undefined'
    }

    render(){
        return <ActionsApprovalPanel currentActionConfig={this.currentActionConfig}/>
    }
}


export default class ActionsApprovalPanel extends React.Component {
    render() 
    {
        ...
        return <ChangeIpApproval onOkClick={this.props.currentActionConfig.onOkClick}/>;
        ...
    }
}

Answer 1

我认为您需要对React组件进行一些更改。

首先：在构造函数中调用super()。

第二：：将currentActionConfig定义为州，并尝试将其用作this.state.currentActionConfig

第三次：在onCommandApprovalOkClicked()上指定绑定。如 onCommandApprovalOkClicked = (commandText) => {}和其他功能类似。

class MainComponent extends React.Component {
     constructor(props){
        super(props);
        this.state = {
        currentActionConfig = {onOkClick: this.onGenericApprovalOkClicked, ...}
        };
     }

    onCommandApprovalOkClicked(commandText){
        console.log(this.props); <- 'undefined'
    }

    render(){
        return <ActionsApprovalPanel currentActionConfig={this.state.currentActionConfig}/>
    }
}


export default class ActionsApprovalPanel extends React.Component {

    render() 
    {
        ...
        return <ChangeIpApproval onOkClick={this.props.currentActionConfig.onOkClick}/>;
        ...
    }
}

进行这些更改，看看它们是否有效。

Answer 2

尝试这些更改

class MainComponent extends React.Component {
     constructor(props){
        super(props); //1. Call super
        this.currentActionConfig = {onOkClick: this.onGenericApprovalOkClicked.bind(this), ...}; // 2.bind this
     }

    onCommandApprovalOkClicked(commandText){
        console.log(this.props); <- 'undefined'
    }

    render(){
        return <ActionsApprovalPanel currentActionConfig={this.currentActionConfig}/>
    }
}


export default class ActionsApprovalPanel extends React.Component {
    render() 
    {
        ...
        return <ChangeIpApproval onOkClick={this.props.currentActionConfig.onOkClick}/>;
        ...
    }
}

从子进程调用回调函数时，React - props为空

2 个答案: