在按钮单击事件上调用组件答案

【问题标题】：Call the component on button click event在按钮单击事件上调用组件
【发布时间】：2019-07-30 16:51:16
【问题描述】：

我是 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;

【问题讨论】：

这里没有导入 Category2 组件。
我建议你通过路由来实现。

标签： reactjs

【解决方案1】：

onclick 回调不应返回组件；

您可以使用state 来动态渲染组件，例如：

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

class GoNext extends Component {
  state = { show: false }

  handleClick() {
    this.setState({ show: true });
  }

  renderNext = () => (
    <div>
      <Button type="primary" onClick={() => this.handleClick()}>
        Next Category
      </Button>
    </div>
  );

  render() {
    const { show } = this.state;
    return (
      <div>
        <h4>Successfully Submit!!!</h4>
        { this.renderNext() }
        { show && <Category2 /> }
      </div>
    );
  }
}

export default GoNext;

【讨论】：

【解决方案2】：

考虑一下：

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


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;

【讨论】：

【解决方案3】：

欢迎来到反应！

您可以做的是在您的状态中创建一个布尔值来切换组件的可见性。

this.state({isNextVisible: false}

然后在 onClick 中将可见性变为 true

onClick = {() => this.setState(isNextVisible: !isNextVisible)}

然后渲染

const renderNext = () => {
  const { isNextVisible } = this.state;
  return (
    <div>
      <Button type="primary" onClick={()=> this.setState(isNextVisible: !this.state.isNextVisible)}>
        Next Category
      </Button>
      {isNextVisible && <Category2 />}
    </div>
  );
};

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

单击时返回 JSX 不会像您那样工作。请阅读'Composition'和Thinking In React。

【讨论】：