單擊時顯示反應組件

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（或結構化）設置為true，如果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
    });
  }