语义-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}

我相信你现在的方式是运行使用 return 为 undefined 的函数。

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

编辑：将 null 更改为 undefined

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

编辑 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>

语义-UI-React 转换

Semantic-UI-React transitions

javascript

state

reactjs

semantic-ui-react