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

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。当 state.clicked === false 时呈现登录按钮，而不是在你的三元中使用 null:

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>
  )
}