Javascript 对多个onChange事件作出反应。。。一个用于验证一个用于格式化输入

我需要一个解决方案来格式化一个电话号码字段的格式（123）456-7890

目前正在使用公共handleChange函数来处理所有输入onChange事件和JOI以进行验证。 有人能帮忙吗

import React from "react";

const Input = ({ name, label, error, ...rest }) => {
  return (
    <div className="form-group">
      <label htmlFor={name}>{label}</label>
      <input
        {...rest}
        name={name}
        id={name}
        className="form-control form-control-sm"
      />
      {error && <div className="fv-help-block">{error}</div>}
    </div>
  );
};

export default Input;

可重用的onChange事件：

handleChange = ({ currentTarget: input }) => {
    const errors = { ...this.state.errors };
    const errorMessage = this.validateProperty(input);
    if (errorMessage) errors[input.name] = errorMessage;
    else delete errors[input.name];

    const data = { ...this.state.data };
    data[input.name] = input.value;

    this.setState({ data, errors });
  };

---

听起来好像你想为你的号码创建一个掩码，以提供你想要的格式

我以前没有使用过这个库，但您可以尝试使用

他们举了一个手机面具的例子

var phoneMask = IMask(
  document.getElementById('phone-mask'), {
    mask: '+{7}(000)000-00-00'
  });

它看起来相当容易使用，但您需要在常规的

handleChange

功能中以不同的方式处理手机输入

---

或者您可能想为

PhoneInput

ing制作另一个专门处理掩码的组件…

谢谢@NathTech。你建议创建另一个组件，效果很好！！！没问题。很高兴这有帮助

handleChange = ({ currentTarget: input }) => {
    const errors = { ...this.state.errors };
    const errorMessage = this.validateProperty(input);
    if (errorMessage) errors[input.name] = errorMessage;
    else delete errors[input.name];

    const data = { ...this.state.data };
    data[input.name] = input.value;

    this.setState({ data, errors });
  };

var phoneMask = IMask(
  document.getElementById('phone-mask'), {
    mask: '+{7}(000)000-00-00'
  });