反应多个onChange事件...一个用于验证，另一个用于格式化输入
反应多个onChange事件...一个用于验证，另一个用于格式化输入
提问于 2020-09-04 18:25:19
我需要一个解决方案来格式化电话号码字段格式(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 });
};回答 1
Stack Overflow用户
回答已采纳
发布于 2020-09-04 18:45:34
听起来您想要为您的号码创建一个掩码，使其具有您想要的格式。
我以前没有使用过这个库，但是您可以尝试使用https://imask.js.org/
他们给出的电话掩码示例如下
var phoneMask = IMask(
document.getElementById('phone-mask'), {
mask: '+{7}(000)000-00-00'
});它看起来很容易使用，但你需要在一般的handleChange函数中以不同的方式处理你的电话输入。
或者您可能想为PhoneInputing制作另一个专门处理掩码的组件……
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/63739329
复制相关文章
相似问题
腾讯云开发者
