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
    });
  }

单击时显示反应组件

2 个答案: