如何从父组件更改子组件中按钮的操作?

时间:2020-03-11 04:51:59

标签: javascript reactjs components

我有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;

0 个答案:

没有答案