Как для onToggle() использовать setTimeout() React, chakra-ui

Question

Критически важно вызвать функцию onToggle() внутри другой функции после 3 секунд

export default function Home() {
  const { isOpen, onToggle } = useDisclosure() // Использую chakra-ui
  const send = () => {
    onToggle()
    // setTimeout(() => onToggle(), 3000)   нужно выполнить
  }
  return (
        <div>
      <Slide direction='top' in={isOpen} style={{ zIndex: 10 }}>
        <p>123</p>
      </Slide>
      <button onClick={() => send()}>Click</button>
    </div>
   )
}

Использование hook'ов невозможно, так как их нельзя использовать вне родительской функции. Пытался сделать вызов onToggle(), c помощью useTimeout(), но он начинает мгновенное исполнение, а мне нужно только при вызове функции send().

Answer 1

Решил проблему добавив onClose() и onOpen()

export default function Home() {
  const { isOpen, onOpen, onClose } = useDisclosure() // Использую chakra-ui
  const send = () => {
    onOpen()
    setTimeout(() => onClose(), 3000)
  }
  return (
        <div>
      <Slide direction='top' in={isOpen} style={{ zIndex: 10 }}>
        <p>123</p>
      </Slide>
      <button onClick={() => send()}>Click</button>
    </div>
   )

БЛОГ НА HUSL

Как для onToggle() использовать setTimeout() React, chakra-ui

Ответы (1 шт):