Semantic-UI-React переходы - PullRequest
Новая
       12

Semantic-UI-React переходы

0 голосов
/ 08 апреля 2019

По сути, я хотел бы, чтобы этот компонент Success Message отображался с переходом при изменении состояния.

Я следовал за документами , но мне все еще не хватает чего-то интегрального (Дух!)

Это мой компонент: 

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 с таким же найденным переходом здесь

Этот примерпоказать результаты, достигнутые при нажатии кнопкиЯ бы хотел, чтобы эта форма была успешно заполнена ...

1 Ответ

1 голос
/ 08 апреля 2019

visible={()=>{this.toggleVisibility}} должно быть visible={this.toggleVisibility}

Я полагаю, что, как у вас есть, вы в настоящее время запускаете функцию с возвратом undefined.

Кроме того, но я не думаю, что функция снова запускается при обновлении this.toggleVisibility.Если он снова запустится, ваша функция должна выглядеть так: visible={()=>this.toggleVisibility} и visible внутри компонента придется вызывать как функцию props.visible(), однако для получения желаемого эффекта функция не требуется.

edit: изменил null на undefined

Edit 2: вот пример https://codesandbox.io/embed/yp1p7vo3q1?fontsize=14 Я использовал хуки, но это более или менее то же самое

Edit 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>
...