如何在按鈕點擊反應時將一個組件移動到另一個組件？

請問您可以告訴我如何將一個組件移動到另一個組件上的按鈕點擊反應？我從CDN。我的react-router.js不知道如何使用這個js ..我想在這裏展示second component on button click of第一component`是我的代碼如何在按鈕點擊反應時將一個組件移動到另一個組件？

http://codepen.io/anon/pen/jVoZjW?editors=1010

class Abc extends React.Component { 
    handle(){ 
    alert('move to second component') 
    } 
    render(){ 
    return (<div><h1>second</h1><button onClick={this.handle}>move to second page</button></div>); 

    } 
} 
class Pqr extends React.Component { 
    render(){ 
    return (<div><h1>second</h1><button>click</button></div>) 

    } 
} 
class Sqr extends React.Component { 
    render(){ 
    return <h1>third</h1> 
    } 
} 
ReactDOM.render(<Abc/>,document.getElementById('root'));

來源

2016-12-25 user944513

當你說「移動」你的意思是「顯示」？ –

是要使用路由器js顯示第二個組件 – user944513

不確定您是否理解React-Router的用例。 React-Router用於更改url時顯示不同的組件層次結構。如果你不改變路由（url），那麼你不應該使用React-Router。 –

有許多方面，這可以被完成，所有這些都有地方。這僅僅是衆多方法中的一種：

我留下了alternitive這個答案藏漢這個答案在codepen： http://codepen.io/dirtyredz/pen/gLJeWY

class Abc extends React.Component { 
    constructor(){ 
    super(); 
    this.state={first: true}; 
    } 
    handle(){ 
    alert('move to second component') 
    this.setState({first: false}) 
    } 
    render(){ 
    return (
     <div> 
     <button onClick={this.handle.bind(this)}>move to second page</button> 
     {this.state.first == true && <Pqr/>} 
     {this.state.first == false && <Sqr/>} 
     </div> 
    ); 
    } 
} 

class Pqr extends React.Component { 
    render(){ 
    return (<div><h1>First</h1></div>) 
    } 
} 
class Sqr extends React.Component { 
    render(){ 
    return <h1>Second</h1> 
    } 
} 
ReactDOM.render(<Abc/>,document.getElementById('root'));

這是一個簡單的例子，就像我前面說的人可能會更好，但這按預期工作。

來源

2016-12-25 05:59:55 DirtyRedz

我想使用RouteHandler – user944513

如何在按鈕點擊反應時將一個組件移動到另一個組件？

回答

相關問題