javascript - 允许在值绑定(bind) react 输入中使用减号(-)

Question

我想知道是否有一个优雅的和/或推荐的解决方案来解决这个问题。

如果我有一个用于数字的输入，并且我想输入负数，我首先必须输入 - 符号。当我输入这个时，parseInt将返回NaN，这是可以理解的。但是，如果输入的值绑定(bind)到 parseInt 的结果，那么我永远无法完成输入数字，因为它一旦尝试解析 - 作为一个 int。

const { useState } = React;

const App = () => {
  const [count, setCount] = useState(0);
  const [inputValue, setInputValue] = useState('')
  
  const update = ({ target }) => {
    const { value } = target;
    
    const attemptedParse = parseInt(value);
    
    if (!attemptedParse) {
      setInputValue(value);
      setCount(0);
    } else {
      setInputValue(attemptedParse);
      setCount(attemptedParse);
    }
  }

  return (
    <div>
      <h1>{count}</h1>
      <input value={inputValue} onChange={update} />
    </div>
  )
};

ReactDOM.render(<App />, document.getElementById('root'));

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

上述解决方案使用两种单独的状态，一种用于输入，另一种用于实际值。但这看起来有点乱，我想知道是否有人有任何涉及更少代码的解决方案。

Answer 1

应该有两种状态，一种用于输入值，另一种用于解析整数。

输入值不一定要重新设置为已解析的整数，这可能会使输入更加麻烦，例如负数的情况:

  const update = ({ target }) => {
    const { value } = target;

    const attemptedParse = parseInt(value);

    if (!Object.is(NaN, attemptedParse)) {
      setCount(attemptedParse);
    }
  }