react-input-mask 的实现

Question

我正在使用带有 reatstrap 的 React，我需要使用某种类型的输入掩码，以防止用户在字段中输入字符，并为货币值缩进（例如 = $ 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}
                      )
                  }
              />

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

Answer 1

根据"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>
  );
}