ReactJS Semantic UI Loader: как активировать переключатель - PullRequest
Новая
       20

ReactJS Semantic UI Loader: как активировать переключатель

0 голосов
/ 06 июля 2019

У меня есть следующий загрузчик (active закомментирован, потому что по умолчанию загрузчик не должен быть виден): 

import React from 'react'
import { Dimmer, Loader, Segment } from 'semantic-ui-react'

const DefaultLoader = () => (
  <Segment>
    <Dimmer
        //active
        page={true}>
      <Loader />
    </Dimmer>
  </Segment>
)

export default DefaultLoader;

Я не уверен в том, как я могу изменить реквизит active при необходимости. У меня компонент загружен так: 

render() {
  return (
    <div className='Lesson-editor'>

      <DefaultLoader />

      ...
      ...

    </div>
  );
}

Я бы хотел показать загрузчик до завершения этой функции: 

const lessonID = await ARSaveLesson(lesson, sectionsToDB);

Спасибо.

1 Ответ

1 голос
/ 06 июля 2019

Вам нужно установить активное состояние и передать его в качестве реквизита, чтобы сделать ваш загрузчик активным или неактивным. 

const DefaultLoader = (props) => (
  <Segment>
    <Dimmer
        active = {props.active}
        page={true}>
      <Loader />
    </Dimmer>
  </Segment>
)

Поддерживать состояние для активного, 

state = {active:false}

и передайте это состояние DefaultLoader

<DefaultLoader active={this.state.active} />

Теперь, когда вы хотите показать загрузчик, сделайте это, 

this.setState({active:true})

Чтобы сделать его неактивным, сделайте это, 

this.setState({active:false})
...