javascript - 语义-UI-React 转换

Question

本质上我想让这个Success Message组件在状态改变时呈现一个转换。

我关注了docs ，但我仍然缺少一些不可或缺的东西(废话!)

这是我的组件:

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，并具有与 here 相同的转换。

该示例显示了通过按钮触发它所获得的结果。我希望它是已成功填写的表格...

Answer 1

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

我相信按照您目前的方式，您正在运行一个返回undefined的函数。

另外，但我认为当 this.toggleVisibility 更新时该函数不会再次运行。如果它再次运行，您的函数应该看起来像 visible={()=>this.toggleVisibility} ，并且组件内的 visible 必须作为函数调用 props.visible() 但是，不需要函数即可获得所需的效果。

编辑:将 null 更改为未定义

编辑2:这是一个例子https://codesandbox.io/embed/yp1p7vo3q1?fontsize=14我确实使用了钩子(Hook)，但它或多或少是相同的

编辑3:toggleVisibility不需要存在

{(!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
}

应该是

 <Transition visible={(!this.formError && this.formSuccess)} 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>