Javascript 单击按钮后更改reactjs中的组件

我有一个带有按钮的菜单，每个按钮指向不同的窗体。基本上，我只想在单击每个按钮时显示相应的表单。我的当前代码没有更新组件，但正在调用函数：

export default class Configuration extends Component{

    constructor(props){
        super(props);
        this.state ={
            response:"",
        };
        currentMode ='upload';
        this.getForms = this.getForms.bind(this);

    }

    componentWillMount(){
        this.getForms('upload');
    }

    getForms(current_mode){
        console.log('im in', current_mode);
        switch(current_mode){
            case 'form1':
                return (<div><Form1/></div>);
            case 'form2':
                return (<div><Form2/></div>);
            case 'form3':
                return (<div><Form3/></div>);
            case 'form4':
                return (<div><Form4/></div>);
        }
    }

    render(){
        return (
            <div>
                        <ConfigurationMenu getForms={this.getForms}/>
                        {this.getForms(currentMode)}
            </div>

    }
}

// here are the buttons:
class ConfigurationMenu extends Component{

    constructor(props){
        super(props);
        this.state={key:1}
    }

    handleSelect(key, formCategory){
        console.log('hiiii', formCategory);
        this.props.getForms(formCategory);
        currentMode=formCategory;
        this.setState({key:key});
    }

    render(){
        return (
            <Nav bsStyle="tabs" activeKey={this.state.key}>
              <NavItem eventKey={1} title="Form1" onClick={()=>this.handleSelect(1, 'form1')}>Form1</NavItem>
              <NavItem eventKey={2} title="Form2" onClick={()=>this.handleSelect(2, 'form2')}>Form2</NavItem>
              <NavItem eventKey={3} title="Form3" onClick={()=>this.handleSelect(3, 'form3')}>Form3</NavItem>
              <NavItem eventKey={4} title="Form4" onClick={()=>this.handleSelect(4, 'form4')}>Form4</NavItem>
            </Nav>
        );
    }
}

导出默认类配置扩展组件{
建造师（道具）{
超级（道具）；
这个州={
答复：“，
};
currentMode='upload'；
this.getForms=this.getForms.bind（this）；
}
组件willmount（）{
这个.getForms（'upload'）；
}
getForms（当前_模式）{
console.log（'im-in'，当前_模式）；
开关（电流模式）{
案例“表格1”：
返回（）；
案例“表格2”：
返回（）；
案例“表格3”：
返回（）；
案例“表格4”：
返回（）；
}
}
render（）{
返回(
{this.getForms（currentMode）}
}
}
//以下是按钮：
类配置菜单扩展组件{
建造师（道具）{
超级（道具）；
this.state={key:1}
}
handleSelect（键、窗体类别）{
console.log（'hiiii'，formCategory）；
this.props.getForms（formCategory）；
currentMode=formCategory；
this.setState（{key:key}）；
}
render（）{
返回(
this.handleSelect（1，'form1'）}>form1
this.handleSelect（2，'form2'）}>form2
this.handleSelect（3，'form3'）}>form3
this.handleSelect（4，'form4'）}>form4
);
}
}

如果我的理解是正确的，您希望在单击

配置菜单中的按钮时更改呈现的表单组件

尝试以下方法：

CloudsimConfiguration

export default class CloudsimConfiguration extends Component {

  constructor(props) {
    super(props);
    this.state = {
      response: '', // I am not sure about the purpose of this, leaving it as it is
      currentMode: 'form1',
    };
  }

  // returns the corresponding Form based on currentMode
  getForm(currentMode) {
    const forms =  {
      form1: <Form1/>,
      form2: <Form2/>,
      form3: <Form3/>,
      form4: <Form4/>
    };

    return forms[currentMode];
  }

  // update currentMode when ConfigurationMenu triggers the callback
  toggleForm(currentMode) {
    this.setState({ currentMode });
  }

  render() {
    return (
      <div>
        <ConfigurationMenu toggleForm={this.toggleForm} />
        <div>
          {this.getForm(this.state.currentMode)}
        </div>
      </div>
    );
  }
}

导出默认类CloudsimConfiguration扩展组件{
建造师（道具）{
超级（道具）；
此.state={
响应：“”，//我不确定此操作的目的，保持原样
currentMode:'form1'，
};
}
//基于currentMode返回相应的表单
getForm（当前模式）{
常数形式={
表格一：，
表格二：，
表格三：，
表格4：
};
返回表单[当前模式]；
}
//当ConfigurationMenu触发回调时更新currentMode
切换形式（当前模式）{
这个.setState（{currentMode}）；
}
render（）{
返回(
{this.getForm（this.state.currentMode）}
);
}
}

配置菜单

class ConfigurationMenu extends Component {
  constructor(props) {
    super(props);
    this.state = { key: 1 };
  }

  handleSelect(key, formCategory) {
    this.props.toggleForm(formCategory);
    this.setState({ key });
  }

  render(){
    return (
      <Nav bsStyle="tabs" activeKey={this.state.key}>
        <NavItem eventKey={1} title="Form1" onClick={() => this.handleSelect(1, 'form1')}>Form1</NavItem>
        <NavItem eventKey={2} title="Form2" onClick={() => this.handleSelect(2, 'form2')}>Form2</NavItem>
        <NavItem eventKey={3} title="Form3" onClick={() => this.handleSelect(3, 'form3')}>Form3</NavItem>
        <NavItem eventKey={4} title="Form4" onClick={() => this.handleSelect(4, 'form4')}>Form4</NavItem>
      </Nav>
    );
  }
}

类配置菜单扩展组件{
建造师（道具）{
超级（道具）；
this.state={key:1}；
}
handleSelect（键、窗体类别）{
this.props.toggleForm（formCategory）；
this.setState（{key}）；
}
render（）{
返回(
this.handleSelect（1，'form1'）}>form1
this.handleSelect（2，'form2'）}>form2
this.handleSelect（3，'form3'）}>form3
this.handleSelect（4，'form4'）}>form4
);
}
}
如果我的理解是正确的，您希望在单击
配置菜单中的按钮时更改呈现的表单组件

尝试以下方法：

CloudsimConfiguration

export default class CloudsimConfiguration extends Component {

  constructor(props) {
    super(props);
    this.state = {
      response: '', // I am not sure about the purpose of this, leaving it as it is
      currentMode: 'form1',
    };
  }

  // returns the corresponding Form based on currentMode
  getForm(currentMode) {
    const forms =  {
      form1: <Form1/>,
      form2: <Form2/>,
      form3: <Form3/>,
      form4: <Form4/>
    };

    return forms[currentMode];
  }

  // update currentMode when ConfigurationMenu triggers the callback
  toggleForm(currentMode) {
    this.setState({ currentMode });
  }

  render() {
    return (
      <div>
        <ConfigurationMenu toggleForm={this.toggleForm} />
        <div>
          {this.getForm(this.state.currentMode)}
        </div>
      </div>
    );
  }
}

导出默认类CloudsimConfiguration扩展组件{
建造师（道具）{
超级（道具）；
此.state={
响应：“”，//我不确定此操作的目的，保持原样
currentMode:'form1'，
};
}
//基于currentMode返回相应的表单
getForm（当前模式）{
常数形式={
表格一：，
表格二：，
表格三：，
表格4：
};
返回表单[当前模式]；
}
//当ConfigurationMenu触发回调时更新currentMode
切换形式（当前模式）{
这个.setState（{currentMode}）；
}
render（）{
返回(
{this.getForm（this.state.currentMode）}
);
}
}

配置菜单

class ConfigurationMenu extends Component {
  constructor(props) {
    super(props);
    this.state = { key: 1 };
  }

  handleSelect(key, formCategory) {
    this.props.toggleForm(formCategory);
    this.setState({ key });
  }

  render(){
    return (
      <Nav bsStyle="tabs" activeKey={this.state.key}>
        <NavItem eventKey={1} title="Form1" onClick={() => this.handleSelect(1, 'form1')}>Form1</NavItem>
        <NavItem eventKey={2} title="Form2" onClick={() => this.handleSelect(2, 'form2')}>Form2</NavItem>
        <NavItem eventKey={3} title="Form3" onClick={() => this.handleSelect(3, 'form3')}>Form3</NavItem>
        <NavItem eventKey={4} title="Form4" onClick={() => this.handleSelect(4, 'form4')}>Form4</NavItem>
      </Nav>
    );
  }
}

类配置菜单扩展组件{
建造师（道具）{
超级（道具）；
this.state={key:1}；
}
handleSelect（键、窗体类别）{
this.props.toggleForm（formCategory）；
this.setState（{key}）；
}
render（）{
返回(
this.handleSelect（1，'form1'）}>form1
this.handleSelect（2，'form2'）}>form2
this.handleSelect（3，'form3'）}>form3
this.handleSelect（4，'form4'）}>form4
);
}
}
工作正常。谢谢。工作正常。谢谢。