在按钮上加载新组件单击在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条评论
登录后参与评论

相关文章

Related 相关文章

热门标签

归档