您能告诉我如何在 React 中单击按钮时将一个组件移动到另一个组件吗?
我从 cdn 获取了 react-router.js
。我不知道如何使用这个 js ..我想在单击第一个组件的按钮时显示第二个组件
这是我的代码
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'));
最佳答案
有很多方法可以实现这一点,所有这些方法都有用。这只是众多方法之一:
我在代码笔上留下了这个答案的替代方案: 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'));
这是一个简单的示例,就像我之前所说的那样,其他示例可能会更好,但这按预期工作。
关于javascript - 如何在 react 中单击按钮将一个组件移动到另一个组件?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/41318668/