单击按钮时更改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>
        );
    }
}
自由的灵魂

如果我理解的是正确的,那么您想更改单击中的按钮时呈现的表单组件ConfigurationMenu

试试这个方法:

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>
    );
  }
}

配置菜单

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>
    );
  }
}

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

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

编辑于
0

我来说两句

0条评论
登录后参与评论

相关文章

来自分类Dev

在MVVM模式中单击时更改按钮颜色

来自分类Dev

在XAML中单击时如何更改按钮图像

来自分类Dev

在jquery中单击时更改按钮文本(显示/隐藏/显示)

来自分类Dev

单击时更改按钮文本

来自分类Dev

单击按钮时更改片段

来自分类Dev

单击按钮更改组件状态

来自分类Dev

单击时如何更改按钮中的文字?

来自分类Dev

当单击Javascript中的按钮时,输入未更改

来自分类Dev

ReactJS-单击单选按钮时动态更改组件的颜色

来自分类Dev

使用reactjs和Material UI单击按钮时更改内容

来自分类Dev

动态页面不会更改呈现的组件,但是单击“后退”按钮(使用链接)时,URL会更改

来自分类Dev

单击ReactJS更改按钮

来自分类Dev

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

来自分类Dev

单击按钮时更改值

来自分类Dev

单击时更改按钮背景

来自分类Dev

单击时更改按钮颜色

来自分类Dev

在ios中单击按钮时如何更改按钮的图像

来自分类Dev

单击事件时,更改同级组件中的输入字段

来自分类Dev

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

来自分类Dev

在React Native中单击按钮时如何渲染组件

来自分类Dev

单击时如何更改按钮中的文字?

来自分类Dev

在ReactJs组件中动态更改CSS时发生TypeError

来自分类Dev

reactjs中的通用按钮组件

来自分类Dev

单击按钮时未呈现组件 - ReactJS

来自分类Dev

Reactjs:单击时如何更改按钮样式

来自分类Dev

单击按钮时显示 2 个组件中的 1 个

来自分类Dev

单击按钮时加载组件

来自分类Dev

ReactJS:如何在按钮单击时更改文本值

来自分类Dev

单击按钮时更改 img

Related 相关文章

热门标签

归档