反应输入掩码的实现

如何解决反应输入掩码的实现

我将 React 与 reatstrap 一起使用，我需要使用某种类型的输入掩码，以防止用户在字段中输入字符，并为货币值进行缩进（示例 = 10.00 美元）

我找到了这个库： https://www.npmjs.com/package/react-currency-masked-input

我试过这个代码：

  <CurrencyInput className = "form-control" value = {this.state.input_value}
              onChange = {
                      e => this.setState (
                          {input_value: e.target.value,input_value_per_numb_days: e.target.value / this.state.numb_days}
                      )
                  }
              />

但是，它不起作用，它只是将我的字段类型更改为数字。 如何使用此掩码处理输入的值？

解决方法

根据"Docs"

使用说明：
在更新其内部值后调用 onChange 属性。第一个参数是原始事件，第二个参数是屏蔽值。

onChange 事件获得了带有掩码值的第二个参数：

export default function App() {
  const [input,setInput] = useState();
  const [numbDays,setNumbDays] = useState(0);

  const numberOfDays = 7;

  const maskInput = (e,masked) => {
    setInput(masked);
    setNumbDays(masked / numberOfDays);
  }

  return (
    <div className="App">
      <CurrencyInput name="myInput" onChange={maskInput} value={input} required />
      <h1>input / {numberOfDays} = {numbDays}</h1>
    </div>
  );
}