javascript - 如何实现正则表达式以对更改事件使用react？

Question

我正在创建表单验证，我的输入之一是 type='text' 但我需要允许用户在那里只写 0-9 和最大数字长度 9 的数字。我可以通过在传递给状态之前，是否有任何正则表达式可以从输入值中消除字母？

const handleChangeData = ({currentTarget}, key) => {
let val = currentTarget.value;

if (currentTarget.name === 'phone') {
      const regex = /d+/;
      val.match(regex);
      changeData(prevState => {
        return {...prevState, [key]: val};
      });
    }
// ... more code here
}

我不想使用 type=number 并且我不能使用 patters 因为我有自己的错误弹出窗口。

html:

<div className="form-control">
  {errors.phone && (
    <div style={{left: '-275.38px'}} className="error">
      {errors.phone}
    </div>
  )}
  <label htmlFor="phone">
    <i className="fas fa-phone-alt"></i>
  </label>
  <input
    value={data.phone}
    id="phone"
    name="phone"
    onKeyPress={handleKeyPress}
    onChange={e => handleChangeData(e, 'phone')}
    type="text"
    placeholder="Numer telefonu"
  />
</div>

Answer 1

您必须处理 onKeyPress 事件。

使用下面的代码来处理验证。

const validateNumber = (evt, regex) => {
    var theEvent = evt || window.event;
    if (!regex.test(key)) {
        theEvent.returnValue = false;
        if (theEvent.preventDefault) theEvent.preventDefault();
    }
}

调用input元素的onKeyPress方法

onKeyPress = (e) => { validateNumber(e, /[0-9]|\./) }

希望这对你有用!