在单击时显示一个react组件

Question

我尝试谷歌搜索这个和搜索堆栈溢出，但这些似乎都没有真正帮助我的解决方案。我正试着设置两个按钮。当单击每个组件时，我希望它呈现各自的组件。以下是我目前为改变国家所做的事情。

import React, { Component } from 'react';
import Structured from '../Structured/Structured';
import YC from '../YC/YC';

class Home extends Component {
constructor() {
  super();
  this.state = {
    YC: false,
    Structured: false
  }
}

ycClick() {
    this.setState({
      YC: true,
      Structured: false
    });
  }


structuredClick() {
    this.setState({
      Structured: true,
      YC: false
    });
  }


render() {
  const { isSignedIn, route } = this.state;
  return (
    <div>
    <h1>Rick's Notes</h1>
    <div class="ph3">
        <a class="f6 link dim br-pill ph3 pv2 mb2 dib white bg-black pa2 ma2" href="#0" onClick={this.ycClick}>YC vs. Non. YC</a>
        {this.state.YC ? <YC /> : null}
        <a class="f6 link dim br-pill ph3 pv2 mb2 dib white bg-black pa2 ma2" href="#0" onClick={this.structuredClick}>Structured Note Descriptions</a>
        {this.state.Structured ? <Structured /> : null}
    </div>
    </div>
  );
}
}

export default Home;

我试图将其设置为YC (或structured)，如果this.state.yc为true，则返回组件。但是，它说这是未定义的，所以它们必须是我调用组件的方式的问题。谢谢你的帮助。如果还有什么需要说明的，请告诉我。

Answer 1

使用this.ycClick.bind(this)而不是this.ycClick (与this.structuredClick相同)

Answer 2

使用以下内容更新处理程序

ycClick = () => {
    this.setState({
      YC: true,
      Structured: false
    });
  }


structuredClick = () => {
    this.setState({
      Structured: true,
      YC: false
    });
  }