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

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;

Answer 2

考虑一下：

首先：要使按钮呈现，我们需要调用该函数，当然还要添加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;

Answer 3

欢迎使用React！

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

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。

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

3 个答案: