React 中的手机号码屏蔽

Question

嗨，当用户在输入框中输入手机号码时，需要屏蔽手机号码，此格式应为 021 121 4544。意味着应该有 021{auto space}121{auto space}4544 我怎样才能建立反应这个功能？

class NumberCheck extends Component {
    state = {
        disabled: true,
        errorBlock: 'none',
        mobileNumber: '',
        error: ''
    };

handleOnChange = (event) => {
    let disabled = event.target.value ? disabled = false : disabled = true;
    this.setState({
        disabled: disabled,
        mobileNumber: event.target.value
    })
}

submit = (e) => {
    e.preventDefault();
    if (this.state.mobileNumber.match(/^02[0-9]{6,11}$/)) {
        this.setState({
            errorBlock: 'none'
        })
        const payload = {
            msisdn: this.state.mobileNumber
        }
        this.props.checkNumber(payload);
    } else {
        this.setState({
            error: ' Please enter valid mobile no',
            errorBlock: 'block'
        })

    }

}

render() {
    const { isLoading, isError } = this.props;
    if (isLoading) {
        return <Spinner />
    }
    if (isError) {
        return <ChangePlanError />
    }
    return (
        <form className="spring spring--sm">
            <p className="heading heading--3 heading--center no-gutter--top">{"Already with Vodafone?"}</p>
            <p className="heading--center">{"Sign in using a TXT code to check if you are eligible to upgrade or change your plan"}</p>
            <div className="alert alert--light alert--warning alert--arrow validation__warning" style={{ display: this.state.errorBlock }}>
                <div className="caption">
                    < div className="caption__media caption__media--top alert__media" >
                        <svg className="icon icon--extra-small icon--inherited" data-vft="icon-modifiers">
                            <use xmlnsXlink="http://www.w3.org/1999/xlink" xlinkHref="#icon-block" />
                        </svg>
                    </div>
                    <div className="caption__text caption__text--top alert__text">
                        {this.state.error}
                    </div>
                </div>
            </div>
            <input
                type="text"
                onChange={this.handleOnChange}
                className="form__input form__input--dark"
                name="mobileno"
                placeholder="021 1234567"
                mask="000 000 0000" />
            <div id="submit" className="form__row form__row--medium gutter--bottom">
                <input
                    type="submit"
                    className={`button button--primary button--primary--grey button--full-width ${this.state.disabled ? 'button--disabled' : ''}`}
                    value=" Continue"
                    onClick={this.submit} />
            </div>
        </form >
    );
}

}

Answer 1

您可以使用先前的字符串创建一个新字符串并在输入中替换它。

const number = '0211214544';
const num = `${number.substring(0, 3)} ${number.substring(3, 6)} ${number.substring(6, number.length)}`;

console.log(num);

在 React 中创建了一个工作示例。

import React, { Component } from 'react';
import logo from './logo.svg';
import './App.css';

class App extends Component {
  constructor(props) {
    super(props);

    this.state = {
      name: ''
    };
  }

  change = (event) => {
    let val = event.target.value;
    val = val.replace(/ /gm, '');
    console.log(val);

    let num = `${val.substring(0, 3)} ${val.substring(3, 6)} ${val.substring(6, val.length)}`;

    num = num.trim();

    this.setState({
      name: num
    });
  };

  render() {
    return (
      <div className="App">
        <input
          ref="inputName"
          value={this.state.name}
          onChange={this.change}
        />
      </div>
    );
  }
}

export default App;