React - реквизит пуст при вызове функции обратного вызова от дочернего

Question

У меня есть кнопка на моем основном компоненте, когда он щелкнул ее, открыв «панель одобрения», и когда нажата кнопка «ОК», я вызываю функцию обратного вызова на главную компонент и сделать некоторую логику.

Я хочу передать функцию обратного вызова (Мои причины). Проблема в том, что при вызове функции обратного вызова реквизиты и состояние не определены.

Почему это происходит? Скажите, пожалуйста, если какая-либо информация отсутствует.

я добавил частичный код здесь:

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}/>; 
     ... 
    } 
}