react-input-mask 的实现

Question

我将 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}
                      )
                  }
              />

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

Answer 1

根据"Docs"

Usage notes:
Calls onChange prop after updating its internal value. First argument is the original event, the second is the masked value.

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

react-input-mask 的实现

implementation of react-input-mask

javascript

input

input-mask

reactjs