reactjs - 在按钮单击事件上调用组件

Question

我是 React.js 新手，我想在按钮单击事件上调用我的组件。

我的要求是，当我单击“下一步”按钮时，我应该调用下一个组件。我尝试使用 onClick 事件并传递函数，该函数返回 .jsx 代码。但它没有渲染。

有人可以帮我吗？

import React, { Component } from "react";
import { Button } from "antd";

class GoNext extends Component {
  render() {

    const nextCategory = () => {
      return <Category2 />;
    };
    const renderNext = () => {
      return (
        <div>
          <Button type="primary" onClick={nextCategory}>
            Next Category
          </Button>
        </div>
      );
    };

    return (
      <div>
        <h4>Successfully Submit!!!</h4>
        {renderNext}
      </div>
    );
  }
}

export default GoNext;

Answer 1

考虑一下:

• 首先:要使按钮呈现，我们需要调用该函数，当然还要添加 this. 以便它在组件中实际找到它:

  <

• 第二:我们希望在状态中有一个属性，它告诉要渲染哪个类别(如果将来有多个类别)。

import React, { Component } from "react";
import { Button } from "antd";

class GoNext extends Component {
  state = {
    activeCategory: 0
  }

  // Each time the button is clicked will add 1 to the activeCategory
  // when that happens a re-render will occur, if 1 is defined as a case in the switch inside renderCategory, it should render a component...
  handleNextCatClick = () => {
    this.setState(prevState => ({
      activeCategory: prevState.activeCategory + 1
    }));
  }

  renderCategory = () => {
    const { state: { activeCategory } } = this;
    switch(activeCategory){
      case 0: return <Category2 />;
      // Add more cases if you wish such like case 1, case 2 ...etc
      default: return null
    }
  };

  renderNextCatButton = () => {
    return (
      <div>
        <Button type="primary" onClick={handleNextCatClick}>
          Next Category
        </Button>
      </div>
    );
  };

  render() {

    return (
      <div>
        <h4>Successfully Submit!!!</h4>
        {this.renderCategory()}
        {this.renderNextCatButton()}
      </div>
    );
  }
}

export default GoNext;