Question

我有一个“注册”按钮。单击它时，我希望它呈现一个名为“SignUp”的新组件。我想让新组件替换“注册”按钮。

目前，我正在使用setState，以便在单击按钮时呈现新组件。但是，该按钮未被替换，“SignUp”组件仅在按钮旁边呈现。对于我来说，用正在渲染的新组件替换按钮可能是一个好方法吗？

我在下面提供了我的代码：

  export default class SignUpSignIn extends Component {

  constructor() {
     super();

     this.state = {
       clicked: false
     };

     this.handleClick = this.handleClick.bind(this);
   }

  handleClick() {
    this.setState({
      clicked: true
    });
  }

  render () {

    return (
    <div id="SignUpSignInDiv">

      <Col md="12" sm="12" xs="12" className="text-center">

        <div onClick={this.handleClick}>

          {this.state.clicked ? <SignUp /> : null}

        <Button id="SignUpButton" color="primary"> Sign Up </Button>

        </div>

       </Col>

    </div>
  )

  }
}

Answer 1

嗯，你不能有条件地渲染这两个组件，只有SignUp。在null：

时，不要在您的三元组中添加state.clicked === false，而是渲染登录按钮

render () {
  return (
    <div id="SignUpSignInDiv">
      <Col md="12" sm="12" xs="12" className="text-center">
        {this.state.clicked ? (
          <SignUp />
        ) : (
          <Button id="SignUpButton" color="primary" onClick={this.handleClick}> Sign Up </Button>
        )}
       </Col>
    </div>
  )
}

Answer 2

这样做的一种方法就是这样，我还没有测试它但它应该可行

render () {
let show = <div></div>
if(this.state.clicked){
show = <SignUp />
}
  return (
    <div id="SignUpSignInDiv">
      <Col md="12" sm="12" xs="12" className="text-center">
          {show}
          <Button id="SignUpButton" color="primary" onClick={this.handleClick}> Sign Up </Button>

       </Col>
    </div>
  )
}

如何用另一个OnClick替换一个React组件？

2 个答案: