#javascript #reactjs
#javascript #reactjs
Вопрос:
Привет, нужно замаскировать номер мобильного телефона, когда пользователь вводит номер мобильного телефона в поле ввода, он должен быть 021 121 4544 в этом формате. означает, что должно быть 021 {автопробеление}121{автопробеление} 4544 как я могу встроить в react эту функциональность?
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 >
);
}
}
Ответ №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;
Комментарии:
1. Спасибо, Шубхам! что мне нужно, так это когда пользователь вводит данные во время выполнения, пробел появляется не после завершения отправки.
2. @SushantSangle onChange принимает значение и обновляет значение в это время.
3. Привет @Shubham каждый раз, когда я запускаю событие onchange, возникает проблема, когда оно принимает каждое поле как вновь введенное поле и создает пробелы в соответствии с этим. итак, onchange был решением, но не сработал.handleOnChange = (событие) => { const number = event.target.value; const num =
${number.substring(0, 3)} ${number.substring(3, 6)} ${number.substring(6, number.length)}
; console.log(num); this.setState({MobileNumber: num }) } >> поле ввода я добавил значение состояния value={this.state.MobileNumber}4. я хочу добавить еще одну проверку в этот приведенный выше код разрешить только поле ввода чисел и максимальное количество цифр 13 не могли бы вы предложить что-нибудь
Ответ №2:
Приведенная ниже функция будет маскировать номер телефона, основной операцией для выполнения таких функций является нарезка / подстрока и конкатенация строк
maskingFunction= (phoneNumber)=>{
let subNum = phoneNumber.toString().substring(0,3)
subNum = subNum "XXXXXXXXXXXX"
return subNum
}
Ответ №3:
Я создал пакет, который предоставляет входной компонент, который отображает замаскированное значение в соответствии с маской, которую он получает.
Маска изменится, удерживая курсор в правильном положении (даже если вы измените часть значения в середине ввода, вставьте некоторые символы или удалите его часть, и даже если маска изменится).
Демонстрационную версию с примерами можно посмотреть на:
https://lucasbasquerotto.github.io/react-masked-input
(В первом примере вводится маска, заданная в этом вопросе SO: 999 999 9999
).
Для установки пакета: npm i react-hook-mask
Используйте это:
import { MaskedInput, createDefaultMaskGenerator } from 'react-hook-mask';
const maskGenerator = createDefaultMaskGenerator('999 999 9999');
const MobileNumberMaskedInput = () => {
const [value, setValue] = React.useState('');
return (
<MaskedInput
maskGenerator={maskGenerator}
value={value}
onChange={setValue}
/>
);
};
Этот компонент переносит значение по умолчанию input
, но пакет также предоставляет перехваты, чтобы вы могли использовать его с любым компонентом.
Функция createDefaultMaskGenerator
, которая всегда возвращает статическую строковую маску. Вы также можете использовать динамические маски, которые изменяются в соответствии со значением и даже преобразуют значение (например, делая символы прописными).
Перехват useMask
— это универсальный перехват, который можно использовать с любым компонентом (даже с собственными компонентами), если у компонента есть способ извлекать и изменять положение курсора.
Хук useRefMask
переносит useMask
и предоставляет простой способ пересылки ссылки в компонент, а также использования ref
элемента в функциях, которые управляют положением курсора (Пример).
(Более конкретный) хук useWebMask
переносится useRefMask
и может использоваться с любым пользовательским react-dom
компонентом, который переносит an input
и чей ref
является an HTMLInputElement
, без необходимости определять получатель и установщик для позиции курсора, а также с onChange
функцией, которая устанавливает значение, полученное от объекта события (пример).