语义-UI-反应转换

Question

本质上，我想让此Success Message组件在状态更改时进行过渡渲染。

我遵循了文档，但是我仍然缺少一些不可或缺的东西（du！）

这是我的组件：

class Login extends Component {

  constructor (props) {

    super(props)

    this.state = {

      isLoggedIn: true,

      isVisible: false,

      hide: 1000,

      show: 1000,

      username: '',

      password: '',

      usernameError: false,

      passwordError: false,

      formError: true,

      formSuccess: false

    }

//methods:

 this.toggleVisibility = this.toggleVisibility.bind(this)

 this.handleChange = this.handleChange.bind(this)

 this.handleIsLoggedInClick = this.handleIsLoggedInClick.bind(this)

 this.handleSubmit = this.handleSubmit.bind(this)

}

我创建的用于切换可见性的函数：

toggleVisibility () { this.setState({ isVisible: !this.state.isVisible })}

和切换的组件：

{(!formError && formSuccess) ?

  <Transition visible={()=>{this.toggleVisibility}} animation='scale' duration={500}>

    <Message success header='Your user registration was successful' content='You may now log-in with the username you have chosen' />

  </Transition>

: null

}

现在，当组件从 (!formError && formSuccess) ?

visible={()=>{this.toggleVisibility}}

更新

我想我应该已经提供了一个视觉效果：澄清一下-我希望当用户成功输入正确的信息进行注册时，成功组件会简单地动画化到DOM中，并在此处找到相同的过渡

该示例显示了使用按钮将其触发后所获得的结果。我希望它是成功填写的表格...