當點擊按鈕

Question

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

Answer 1

如果我的理解是正確的，你想改變，當你點擊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> 
    ); 
    } 
} 

ConfigurationMenu

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