响应多个onChange事件..一个用于验证，一个用于格式化输入

Question

我需要一个解决方案来将电话号码字段格式化为(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;

可重复使用组件

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

Answer 1

听起来你想为你的数字创建一个掩码，为它提供你想要的格式。

我以前没有使用过这个库，但你可以尝试使用https://imask.js.org/

他们给出的手机口罩的例子是

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

它看起来很容易使用，但在一般的handleChange功能中，您需要以不同的方式处理手机输入。

或者，您可能想为PhoneInputing制作另一个专门处理掩码的组件。。。