子からコールバック関数を呼び出すときにReact - 小道具が空になる

Question

メインコンポーネントにボタンがあり、そのボタンをクリックすると "承認チャンネル"が開き、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

私はあなたがあなたのリアクトコンポーネントにいくつかの変更を加える必要があると思います。

最初に：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}/>; 
     ... 
    } 
} 

これらの変更をお試しください