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

现在，当qazxsw poi中的组件变得可见时，这不会激发

(!formError && formSuccess) ?

UPDATE

我想我应该提供一个视觉效果：澄清一下 - 当用户成功输入正确的信息进行注册时，成功组件只需动画进入DOM，并找到相同的转换点visible={()=>{this.toggleVisibility}}

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

Answer 1

here应该是visible={()=>{this.toggleVisibility}}

我相信你拥有它的方式你现在正在运行一个返回visible={this.toggleVisibility}的函数。

此外，但我不认为当undefined更新时该功能会再次运行。如果它再次运行，你的函数应该看起来像this.toggleVisibility和组件内的visible={()=>this.toggleVisibility}必须被调用为函数visible但是，不需要函数来获得所需的效果。

编辑：将null更改为undefined

编辑2：这里是一个例子props.visible()我确实使用了钩子，但它或多或少相同

编辑3：https://codesandbox.io/embed/yp1p7vo3q1?fontsize=14不需要存在

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
}