0
改变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>
);
}
}
完美。谢谢。 – theJuls