Как изменить действие кнопки в дочернем компоненте по сравнению с родительским компонентом?

Question

У меня есть 2 компонента TermsOfServices, который используется в 2 родительских компонентах. Одним из родительских компонентов является мой ReadTosPage компонент. В моем дочернем компоненте есть кнопка, которая управляет условным отображением значков в соответствии с номером страницы, на которой они размещены. Что я хотел бы сделать, это только изменить поведение кнопки, на которой есть значок галочки в моем родительском компоненте ReadTosPage, чтобы она закрывала страницу без отправки какой-либо информации. Просто закройте страницу. Как я могу сделать это от родителей? Спасибо

моя FAB кнопка в TermsOfServices:

<Fab position="right-bottom" slot="fixed" color="pink" onClick={() => this.handleNext()}>
   {currentTosId + 1 === termsOfServices.length &&
   <Icon ios="f7:check" aurora="f7:check" md="material:check" />}
   {currentTosId !== termsOfServices.length &&
   <Icon ios="f7:chevron_right" aurora="f7:chevron_right" md="material:chevron_right" />}
</Fab>

ReadTosPage:

import React, { PureComponent } from 'react';
import { intlShape } from 'react-intl';
import {
  Page,
  Navbar,
  Block,
} from 'framework7-react';
import TermsOfServices from '../components/TermsOfServices';

class ReadTosPage extends PureComponent {
  static contextTypes = {
    intl: intlShape,
  };

  render() {
    const { intl } = this.context;
    const { formatMessage } = intl;

    return (
      <Page>
        <Navbar backLink title={formatMessage({ id: 'press_yui_tos_title' })} />
        <Block>
          <TermsOfServices />
        </Block>
      </Page>
    );
  }
}

export default ReadTosPage;