代码之家 › 专栏 › 技术社区 › Shresth Gour

从用户那里获取价值并在react中开始倒计时

tailwind-css frontend react-hooks reactjs javascript

Shresth Gour · 技术社区 · 1 年前

我正在使用制作一个倒计时应用程序 反应JS 和 顺风CSS 并且当前倒计时是根据来自 useState 钩子,但我想 接受用户的输入,当用户单击提交按钮时,我想开始倒计时 。
请有人帮帮我,我已经被困在这上面两个小时了!谢谢

这是代码:

应用程序.js-

import React from 'react'
import CountDown from './components/CountDown'

const App = () => {
  return (
    <div>
      <CountDown/>
    </div>
  )
}

export default App

倒计时.js-

import React, { useState, useEffect, useRef } from 'react'

const CountDown = () => {
  const [count, setCount] = useState(10);
  let cntVal = useRef();

  const handleChange = e =>{
    setCount(e.target.value)
  }

  const handleSubmit = () =>{
    if(count < 0){
      alert("Count cannot be negative!");
      return;
    }
  }

  useEffect(() => {
    cntVal.current = setInterval(() => {
      setCount(prev => prev - 1)
    }, 1000)
    return () => clearInterval(cntVal.current)
  },[]);

  useEffect(() => {
    if(count === 0){
      clearInterval(cntVal.current);
      alert("END!")
    }
  })
  
  return (
    <div className='h-[100vh] w-full flex flex-col items-center justify-center'>
      <div className="border border-black p-12 items-center justify-center">
        <div className="flex justify-center">
          <p className='text-3xl font-bold'>Countdown App</p>
        </div>
        <div className="flex justify-center mt-10">
          <p className='font-semiboldld text-2xl'>{count}</p>
        </div>
        <div className="flex mt-10 mb-4 items-center justify-center">
          <label htmlFor="name" className='text-xl'>Enter a Number: </label>
          <input className='border border-black ml-2 p-2 rounded-lg text-xl' type="text" name="cntDown" ref={cntVal} id="cntDown" onChange={handleChange} />
        </div>
        <div className="flex justify-center">
          <button className="bg-blue-500 hover:bg-blue-700 text-white font-bold py-2 px-4 rounded" onClick={handleSubmit}>
            Submit
          </button>
        </div>
      </div>
    </div>
  )
}

export default CountDown

1 回复 | 直到 1 年前

0stone0 1 年前

您可以从开始倒计时 handleSubmit 功能:

const handleSubmit = () =>{
    if(count < 0){
      alert("Count cannot be negative!");
      return;
    }
    cntVal.current = setInterval(() => {
      setCount(prev => prev - 1)
    }, 1000)
  }

唯一的其他更改是在“卸载”逻辑中,请检查是否 (cntVal.current) 在调用之前设置 clearInterval(cntVal.current) ;

const {  useState, useEffect, useRef } = React;

const CountDown = () => {
  const [count, setCount] = useState(10);
  let cntVal = useRef();

  const handleChange = e =>{
    setCount(e.target.value)
  }

  const handleSubmit = () =>{
    if(count < 0){
      alert("Count cannot be negative!");
      return;
    }
    cntVal.current = setInterval(() => {
      setCount(prev => prev - 1)
    }, 1000)
  }

  useEffect(() => {
    return () => {
        if (cntVal.current) {
            clearInterval(cntVal.current);
        }

    }
  },[]);

  useEffect(() => {
    if(count === 0){
      clearInterval(cntVal.current);
      alert("END!")
    }
  })
  
  return (
    <div className='h-[100vh] w-full flex flex-col items-center justify-center'>
      <div className="border border-black p-12 items-center justify-center">
        <div className="flex justify-center">
          <p className='text-3xl font-bold'>Countdown App</p>
        </div>
        <div className="flex justify-center mt-10">
          <p className='font-semiboldld text-2xl'>{count}</p>
        </div>
        <div className="flex mt-10 mb-4 items-center justify-center">
          <label htmlFor="name" className='text-xl'>Enter a Number: </label>
          <input className='border border-black ml-2 p-2 rounded-lg text-xl' type="text" name="cntDown" ref={cntVal} id="cntDown" onChange={handleChange} />
        </div>
        <div className="flex justify-center">
          <button className="bg-blue-500 hover:bg-blue-700 text-white font-bold py-2 px-4 rounded" onClick={handleSubmit}>
            Submit
          </button>
        </div>
      </div>
    </div>
  )
}

ReactDOM.render(<CountDown />, document.getElementById("react"));

ReactDOM.render(<CountDown />, document.getElementById("react"));

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/17.0.1/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/17.0.1/umd/react-dom.production.min.js"></script>
<div id="react"></div>

paliz 1 年前

看这里

import React, { useState, useEffect, useRef } from 'react'

 const CountDown = () => {
 const [count, setCount] = useState(10);
 const [userCount, setUserCount]= useState(0);
 let cntVal = useRef();

 const handleChange = e =>{
 setUserCount(e.target.value);
 }

 const handleSubmit = () =>{
   if(userCount < 0){
    alert("Count cannot be negative!");
    return;
  }
   setCount(userCount);
  }

 useEffect(() => {
  cntVal.current = setInterval(() => {
    setCount(prev => prev - 1)
   }, 1000)
  return () => clearInterval(cntVal.current)
  },[]);

 useEffect(() => {
  if(count === 0){
      clearInterval(cntVal.current);
     alert("END!")
    }
   })

  return (
<div className='h-[100vh] w-full flex flex-col items-center justify-center'>
  <div className="border border-black p-12 items-center justify-center">
    <div className="flex justify-center">
      <p className='text-3xl font-bold'>Countdown App</p>
    </div>
    <div className="flex justify-center mt-10">
      <p className='font-semiboldld text-2xl'>{count}</p>
    </div>
    <div className="flex mt-10 mb-4 items-center justify-center">
      <label htmlFor="name" className='text-xl'>Enter a Number: </label>
      <input className='border border-black ml-2 p-2 rounded-lg text-xl' type="text" name="cntDown" ref={cntVal} id="cntDown" onChange={handleChange} />
    </div>
    <div className="flex justify-center">
      <button className="bg-blue-500 hover:bg-blue-700 text-white font-bold py-2 px-4 rounded" onClick={handleSubmit}>
        Submit
      </button>
    </div>
  </div>
</div>
     })