Таймер реакции + изменение цвета

У меня есть простой элемент div в реакции, теперь я хотел бы иметь возможность где-то предварительно установить время, например, через 10 минут. Div изменит цвет.

Кто-нибудь знает, возможно ли этого достичь?

Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией
Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией
В JavaScript одним из самых запутанных понятий является поведение ключевого слова "this" в стрелочной и обычной функциях.
Концепция локализации и ее применение в приложениях React ⚡️
Концепция локализации и ее применение в приложениях React ⚡️
Локализация - это процесс адаптации приложения к различным языкам и культурным требованиям. Это позволяет пользователям получить опыт, соответствующий...
Навигация по приложениям React: Исчерпывающее руководство по React Router
Навигация по приложениям React: Исчерпывающее руководство по React Router
React Router стала незаменимой библиотекой для создания одностраничных приложений с навигацией в React. В этой статье блога мы подробно рассмотрим...
Массив зависимостей в React
Массив зависимостей в React
Все о массиве Dependency и его связи с useEffect.
1
0
1 409
1

Ответы 1

Используйте API componentDidMount для инициализации таймера и не забудьте удалить его на componentWillUnmount.

class App extends Component {
  constructor() {
    super()
    this.state = {
      color: 'blue'
    }
  }

  handleChangeEventColor = (newColor) => {
    this.setState({
      color: newColor
    })
  }

  componentDidMount() {
    this.timer = setTimeout(
      () => this.handleChangeEventColor('red'),
      1000*3 // in milliseconds, 3s for fast show
    )
  }

  componentWillUnmount() {
    clearTimeout(this.timer)
  }

  render() {
    return (
      <div style = { { background: this.state.color} }>
        Color Div
      </div>
    )
  }
}

Чтобы увидеть полный код, проверьте здесь.

также можно запустить таймер с предустановки? например, я предварительно установил таймер на 7 минут для начала, а затем на 10 он изменится?

Brian Neyens 28.08.2018 12:44

Если вы действительно хотите сделать это, вы можете обернуть setTimeout в функцию и создать новый слушатель setTimeout для вызова этой функции через 7 минут. Проверьте здесь для получения дополнительной информации о setTimeout.

Hopsken 29.08.2018 03:23

Другие вопросы по теме