代码之家 › 专栏 › 技术社区 › OliverRadini

允许值绑定反应输入中的减号(-)

reactjs javascript

OliverRadini · 技术社区 · 6 年前

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

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


   
    
     
     
     
      &13;
      
       &13;
       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'));
       和13;
       <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>
       和13;
      
      >13;
     
     >13;
     
      上述解决方案使用两个单独的状态,一个用于输入,另一个用于实际值。但这似乎有点混乱,我想知道是否有人有任何解决方案涉及到更少的代码。

2 回复 | 直到 6 年前

Estus Flask 6 年前

应该有两种状态,一种用于输入值,另一种用于已分析的整数。

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

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

    const attemptedParse = parseInt(value);

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

vmf91 6 年前

可以使用正则表达式

&13;

const { useState } = React;

const App = () => {
  const [count, setCount] = useState(0);
  const [inputValue, setInputValue] = useState('')
  
  const update = ({ target }) => {
    var { value } = target;
    
    // Replace all non-numeric characters to ''
    value = value.replace(/[^0-9-]+/g, '');
    
    // The real pattern you are looking for
    var pattern = /([-])?([0-9]+)/g;
    var matches = value.match(pattern);
    if(matches){
      value = matches[0];
    }
    setInputValue(value);
    setCount(value);
  }

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

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

和13;

<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>

和13;

>13;