如何在反应js中只允许文本框中的数字和格式为美国手机号码格式？例如：(224) - 5623 -2365

Question

我正在使用 React 进行手机号码验证。 TextField 应该只允许数字，它将格式化为美国手机号码格式。我限制只允许数字，但格式没有发生。我正在使用 material-ui 进行验证。在我的代码下面。

 import React from 'react';
import TextField from '@material-ui/core/TextField';

export default class myClass extends React.Component {
    constructor(props) {
        super(props);

        this.state = {
            value: '',
        };
        this.handleChange = this.handleChange.bind(this);
    }
    handleChange(e) {
        const re = /[0-9]+/g;
        if (e.target.value === '' || re.test(e.target.value)) {
            this.setState({ value: e.target.value });
        }
    }
    render() {
        return (
            <div>
                <TextField
                    floatingLabelText="mobileNumber"
                    onChange={this.handleChange}
                    value={this.state.value}
                />
            </div>
        );
    }
}

原文由 Soumya Behera 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 1

我已将文本框限制为仅允许数字，并将手机号码格式化为美国手机号码格式。按照下面的代码。

 handleChange(e) {
    const onlyNums = e.target.value.replace(/[^0-9]/g, '');
    if (onlyNums.length < 10) {
        this.setState({ value: onlyNums });
    } else if (onlyNums.length === 10) {
        const number = onlyNums.replace(
            /(\d{3})(\d{3})(\d{4})/,
            '($1) $2-$3'
        );
        this.setState({ value: number });
    }
}

原文由 Soumya Behera 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 2

import Input from '@material-ui/core/Input';

使用 <Input type="number" /> 代替。

原文由 Yrineu Rodrigues 发布，翻译遵循 CC BY-SA 4.0 许可协议