Реагирует на событие множественного обмена... один для проверки, один для форматирования ввода

#javascript #reactjs #typescript

Вопрос:

Мне нужно решение для форматирования поля номера телефона в формат (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 amp;amp; <div className="fv-help-block">{error}</div>}
    </div>
  );
};

export default Input;

Повторно используемый компонент

 renderInput(name, label, type = "text") {
    const { data, errors } = this.state;

    return (
      <Input
        type={type}
        name={name}
        value={data[name]}
        label={label}
        onChange={this.handleChange}
        error={errors[name]}
      />
    );
  }

Поле ввода с именем и меткой

 {this.renderInlineInput("client.phoneNo","Phone #")}

Повторно используемое событие 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 });
  };

Ответ №1:

Похоже, вы хотите создать маску для своего номера, чтобы придать ему нужный формат.

Я раньше не использовал эту библиотеку, но вы могли бы попробовать использовать https://imask.js.org /

Пример, который они приводят для маски телефона, является

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

Это выглядит довольно простым в использовании, но вам нужно будет по-другому обрабатывать ввод с телефона в вашей общей handleChange функции.

Или вы можете захотеть создать другой компонент для PhoneInput редактирования, который специально обрабатывает маску…