Question

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

如果我有一个用于数字的输入，并且想输入一个负数，我首先必须输入NaN符号。输入此内容时，import pandas as pd import numpy as np tmp_float = np.array([1.0,2.0,3.0]).astype('float64') tmp_int = np.array([1,2,3]).astype('uint64') row_df = pd.DataFrame(columns=['float', 'int']) row_df = row_df.astype({'float': 'float64', 'int': 'Int64'}) for i in range(3): row_df.at[i, 'float'] = tmp_float[i] row_df.loc[i, 'int'] = tmp_int[i] print(row_df) # float int #0 1.0 1 #1 2.0 2 #2 3.0 3 row_df.dtypes #float float64 #int Int64 #dtype: object type(row_df.loc[0, 'int']) #numpy.int64将返回-，这是可以理解的。但是，如果输入的值绑定到parseInt的结果，那么我将永远无法完成输入数字，因为一旦尝试将NaN解析为一个整数，它将失败。

parseInt

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

Answer 1

您可以使用正则表达式

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'));

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

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

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

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

    const attemptedParse = parseInt(value);

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

值绑定反应输入中允许减号（-）

2 个答案: