在Class

Question

尝试从const MatchNotScoredAlert的类外部调用this.toggleModal不起作用。它是从onClick传递的，由链接调用。我如何正确绑定它以在类内部调用toggleModal（）函数？

const MatchNotScoredAlert = ({ onClick }) => (
     <div className="alert alert-grey m-l-10 m-r-10">
      <div className="d-inline-block">
        <h4 className="m-0">Match Not Scored</h4>
      </div>
      <a className="pull-right dark-icon d-inline-block" onClick={onClick} style={{ fontSize: 24 }}>
        <span className="glyphicons glyphicons-exclamation-sign" />
      </a>
    </div>
  );


class Match extends React.PureComponent {
  constructor(props) {
    super(props);
    this.toggleModal = this.toggleModal.bind(this);

    this.state = {
      modal: false,
    };
  }
  toggleModal(e) {
    e.preventDefault();
    this.setState({
      modal: !this.state.modal,
    });
  }

  render() {
    const {
      data: { match },
    } = this.props;
    const {
      division: { contacts },
    } = match;

    return (
      <Container>
        <PageTitle>Matchup:</PageTitle>
        <Helmet>
          <title>Matchup</title>
        </Helmet>
        <MatchHeader match={match} />
        {!match.isScored && <MatchNotScoredAlert onClick={this.toggleModel} />})

Answer 1

您有错字：

toggleModal(e) {
  ...
}

<MatchNotScoredAlert onClick={this.toggleModel} />

用'a'代替'e'