在按钮上加载新组件单击在ReactJs中?

萨兰

我要在按钮单击上加载新组件。一个新的组件应该完全替换当前的组件-我的意思是应该将其加载到整个屏幕上(而不是按钮旁边的任何位置)。

从“反应”导入React;

MasterIncident类扩展了React.Component {

render(){

return (
  <React.Fragment>
    <button
      variant="contained"
      size="medium"
      color="primary"
      value="single"
      name="1"
      onClick={this.props.clickBtn}
    >
      Add
    </button>
    <button
      variant="contained"
      size="medium"
      color="primary"
      value="batch"
      name="2"
      onClick={this.props.clickBtn}
    >
      Export
    </button>
    <h3>Master Incident Inventory</h3>
  </React.Fragment>
);

}}

导出默认的MasterIncident;

从“ ./MasterIncident”导入MasterIncident;

从'./MasterAddPage'导入MasterAddPage;

MasterCreate类扩展Component {

state = {
    renderView: 0
  };

  clickBtn = e => {
    this.setState({
      renderView: +e.target.parentNode.name
    });
  };

  render() {
    switch (this.state.renderView) {
      case 1:
        return <MasterAddPage />;
      default:
        return <MasterIncident clickBtn={this.clickBtn} />;
    }
  }

}

导出默认的MasterCreate

const MasterAddPage =(props)=> {

     console.log(props)
        return (
          <div >Content</div>
        )
    }

导出默认的MasterAddPage

它给出错误TypeError:如果没有“ new”,则不能调用类构造函数MasterIncident

哈比尔

我已经修复了您的代码。请在下面检查此示例:

MasterCreate组件

import MasterIncident from './MasterIncident';
import MasterAddPage from './MasterAddPage';
import React from "react";

class MasterCreate extends React.Component {
    state = {
        renderView: 0
    };

    clickBtn = (value) => {
        this.setState({
            renderView: value
        });
    };

    render() {
        switch (this.state.renderView) {
            case 1:
                return <MasterAddPage value={"Master Add Page is added"}/>;
            default:
                return <MasterIncident clickBtn={this.clickBtn}/>;
        }
    }
}
export default MasterCreate;

主事件组件

import React from "react";

class MasterIncident extends React.Component {
    render() {
        console.log('master incident');
        return (
            <React.Fragment>
                <button
                    variant="contained"
                    size="medium"
                    color="primary"
                    value="single"
                    name="1"
                    onClick={() => {this.props.clickBtn(0)}}
                >
                    Add
                </button>
                <button
                    variant="contained"
                    size="medium"
                    color="primary"
                    value="batch"
                    name="2"
                    onClick={() => {this.props.clickBtn(1)}}
                >
                    Export
                </button>
                <h3>Master Incident Inventory</h3>
            </React.Fragment>
        );
    }
}
export default MasterIncident;

MasterAddPage组件

import React from "react";

const MasterAddPage = (props) => {
    console.log(props);
    return (
        <div>Content</div>
    )
};
export default MasterAddPage;

本文收集自互联网,转载请注明来源。

如有侵权,请联系[email protected] 删除。

编辑于
0

我来说两句

0条评论
登录后参与评论

相关文章

来自分类Dev

在按钮上单击多个ListView

来自分类Dev

div在按钮上单击显示在jQuery中

来自分类Dev

在按钮上单击选择tableViewCell

来自分类Dev

如何在按钮上单击加载页面

来自分类Dev

在按钮上单击列表中的绑定网格视图

来自分类Dev

在按钮单击事件上绑定dxSelectBox

来自分类Dev

使用JQUERY在按钮单击上打开新选项卡

来自分类Dev

Android:在按钮上打开新的布局单击并删除当前布局

来自分类Dev

在按钮上打开新屏幕,快速单击

来自分类Dev

UIAlertController在按钮上单击

来自分类Dev

在每个按钮上单击角度后加载组件

来自分类Dev

在按钮上单击,页面无用

来自分类Dev

在按钮上单击更改XML页面中的图像。

来自分类Dev

如何检查所有CheckBox都在按钮上单击android中单击

来自分类Dev

在按钮上显示div单击

来自分类Dev

在按钮单击事件上绑定dxSelectBox

来自分类Dev

使用JQUERY在按钮单击上打开新选项卡

来自分类Dev

在按钮上单击隐藏键盘

来自分类Dev

当我在reactjs中单击按钮时如何加载函数

来自分类Dev

如何在按钮上单击以重新加载砌体

来自分类Dev

UIAlertController在按钮上单击

来自分类Dev

React:组件仅在按钮的第二onClick上呈现新值

来自分类Dev

单击按钮时更改reactjs中的组件

来自分类Dev

在按钮单击和选项上添加新的div以选择显示文本框的选项

来自分类Dev

如何在按钮单击时将图片连续添加到 ReactJS 中的表格

来自分类Dev

如何在按钮上动态加载 API 数据 单击 React Native

来自分类Dev

在按钮单击时将多个模板加载到 django 中的基本模板中

来自分类Dev

单击按钮时加载组件

来自分类Dev

在按钮上单击使用“document.createElement('script') 加载的交换 JS 文件

Related 相关文章

热门标签

归档