仅使用一个函数管理输入计数的状态

Question

我有一个带有按钮的输入来减少和增加输入的值，这个输入有特定的规则： 最小值、最大值、初始值。

如果用户手动更改输入，输入一个数字，我的输入不允许他输入 100 到 5000，因为就在他删除所有数字以输入我的最小值验证时，不允许输入空，因此值设置为最小值，我感觉我的代码有点乱我尝试了一种更干净的方法但没有成功：

代码示例： https://codesandbox.io/s/lingering-architecture-v93113?file=/src/App.js

尝试将所有内容都放在一个“handleChange”函数中，但我相信我做错了什么，因为反应无法改变我的计数状态

Answer 1

1. 您可以将递增和递减逻辑放在一个函数中，但不推荐这样做。因为他们做了两件不同的事情。但是在我的解决方案中，我将它们放在 1 个单一函数中作为示例。

2. 您应该使用 event.target.value 来获取输入的值。

3. 您应该检查用户输入的值是否不小于最小值。

   所以希望它有所帮助：

   import "./styles.css";
   import { useState } from "react";
   
   export default function App() {
     const initialValue = 5000;
     const min = 100;
     const max = initialValue;
     const range = 100;
     const [count, setCount] = useState(initialValue);
     const [disabled, setDisabled] = useState(true);
     const [incrementDisabled, setIncrementDisabled] = useState(true);
     const [decrementDisabled, setDecrementDisabled] = useState(false);
     const [error, setError] = useState(false);
   
     const handleButtonClicked = (type) => {
       switch(type) {
         case 'increment':
             if (count < max) {
               setError(false);
               setCount(count + range);
               setDisabled(false);
               setDecrementDisabled(false);
               return;
             }
             setIncrementDisabled(true);
             break;
         case 'decrement':
           if (count > min) {
               setError(false);
               setCount(count - range);
               setDisabled(false);
               setIncrementDisabled(false);
               return;
           }
           setDecrementDisabled(true);
           break;
         default:
           break;
       }
     };
   
     const handleChange = (value) => {
       const countValue = value ? parseInt(value.replace(/D/g, "")) : min;
       const isGreaterThanInitialValue = countValue > initialValue;
       const isLessThanMinimum = countValue < min;
   
       if (isGreaterThanInitialValue || isLessThanMinimum) {
         setError(true);
         setCount(count);
         return;
       }
   
       setCount(countValue);
       setError(false);
       setIncrementDisabled(false);
       setDecrementDisabled(false);
       setDisabled(false);
     };
   
     return (
       <div className="App">
         <button type="button" onClick={() => handleButtonClicked('increment')}>
           +
         </button>
         <input
           type="text"
           name="point"
           value={count}
           onChange={(event) => handleChange(event.target.value)}
         />
         <button type="button" onClick={() => handleButtonClicked('decrement')}>
           -
         </button>
       </div>
     );
   }