Riveran
@Riveran
JavaScript noob

Как запустить метод ребёнка из родителя?

У меня есть основной компонент такого типа
export default class ExportPageComponent extends React.Component {

    onExportIconMenuClick (isCommonConsumption) {
      
    }

    render () {
      return (
        <Box justifyContent='space-between' className='container'>
          <Table/>
          <ModalLoading/>
          <Button onClick={this.onExportIconMenuClick.bind(this)}/>
        </Box>
      )
    }
  }


и компонент модального окна которое должно появляться при клике на кнопку Button

class Modal extends React.Component {
  constructor() {
    super();

    this.state = {
      isDownload: false
    }
  }

  onExportExcel (isCommonConsumption) {
    this.setState({
      isDownload: true,
    }, () => {
      $.get({
          //запрос
        },
        success: (content) => {
          //успешный ответ
        },
        error: (error) => {
          //ошибка
          this.setState({
            modalMessage: 'Something went wrong'
          })
          console.log(error);
        }
      }).then(() => {
        this.setState({
          isDownload: false
        })
      });
    })
  }

  render() {
    const {isDownload} = this.state

    return(
      <BasicModal
      isModalOpened={isDownload}
      >
        <React.Fragment>
          {CM.gettext('Please wait, preparing data for export, it could take some time...')}
        </React.Fragment> 
      </BasicModal>
    )
  }
}


Проблема состоит в том, что я не могу понять, как я могу запустить метод onExportExcel модального окна, при клике на кнопку Button у родителя, может кто занет решение?
  • Вопрос задан
  • 87 просмотров
Решения вопроса 1
Пригласить эксперта
Ответы на вопрос 1
rockon404
@rockon404 Куратор тега React
Frontend Developer
Часто в таких кейсах применяют render props:
return (
  <ModalWrapper
    body="Body text"
    isProcessing={isFetching}
    onConfirm={this.handleConfirm}
  >
    {openModal => (
      <Button onPress={openModal}>
        Some dangerously action
      </Button>
    )}
  </ModalWrapper>
);
Ответ написан
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы