如何在反应中单击按钮时将一个组件移动到另一个组件? [英] how to move one component to another component on button click in react?

问题描述

你能告诉我如何在反应中点击按钮时将一个组件移动到另一个组件吗?我从 cdn 得到 react-router.js .我不知道如何使用这个 js ..我想在按钮点击第一个组件`时显示第二个组件这是我的代码

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

class Abc 扩展 React.Component {处理(){alert('移动到第二个组件')}使成为 (){return (<div><h1>second</h1><button onClick={this.handle}>移动到第二页</button></div>);}}类 Pqr 扩展了 React.Component {使成为 (){返回(<div><h1>秒</h1><button>点击</button></div>)}}类 Sqr 扩展了 React.Component {使成为 (){返回<h1>第三</h1>}}ReactDOM.render(<Abc/>,document.getElementById('root'));

解决方案

有很多方法可以实现这一点，所有这些方法都有.这只是众多方法中的一种:

我在代码笔上留下了这个答案的替代方案以及这个答案:http://codepen.io/dirtyredz/pen/gLJeWY

class Abc 扩展 React.Component {构造函数(){极好的();this.state={first: true};}处理(){alert('移动到第二个组件')this.setState({first: false})}使成为 (){返回 (<div><button onClick={this.handle.bind(this)}>移动到第二页</button>{this.state.first == true &&<Pqr/>}{this.state.first == false &&<平方/>}

);}}类 Pqr 扩展了 React.Component {使成为 (){返回(<div><h1>第一</h1></div>)}}类 Sqr 扩展了 React.Component {使成为 (){返回<h1>第二</h1>}}ReactDOM.render(<Abc/>,document.getElementById('root'));

这是一个简单的例子，就像我之前说的，其他人可能会更好，但它按预期工作.

could you please tell me how to move one component to another component on button click in react ? I get the react-router.js from cdn .I don't know how to use this js ..I want to show second component on button click offirst component` here is my code

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

解决方案

There is many ways this can be accomplished, all of which have there place. This is but one of many methods:

I left an alternitive to this answer aswell this answer on the 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')); 

This is a quick example, like i said earlier others may be better but this works as expected.

这篇关于如何在反应中单击按钮时将一个组件移动到另一个组件?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！