Маска ввода не работает при удалении значения - PullRequest
Новая
       41

Маска ввода не работает при удалении значения

1 голос
/ 26 марта 2020

Я построил функцию для маскировки ввода при наборе текста, и она отлично работает, но при удалении значения из ввода маска ведет себя странно. 

function App() {
const [phone, setPhone] = React.useState('')

  function maskPhone({ target: { value } }) {
		console.log(value)
		const toMatch = value.replace(/\D/g, '')
    const regex = /(\d{0,2})(\d{0,1})(\d{0,4})(\d{0,4})/
		const [,ddd, prefix, first, second] = toMatch.match(regex)
		setPhone(`(${ddd}) ${prefix} ${first} ${second}`)
	}
  
  return  <div>
      phone: <input type='text' onChange={maskPhone} value={phone} />
  </div>
}

ReactDOM.render(<App/>, document.querySelector('#root'))
<script src="https://unpkg.com/react@16/umd/react.development.js"></script>
<script src="https://unpkg.com/react-dom@16/umd/react-dom.development.js"></script>
<div id="root"></div>

1 Ответ

1 голос
/ 26 марта 2020

Необходимо сделать почти все части регулярного выражения необязательными с шаблоном типа (?:\s*(\d{n,m}))?, а затем проверить соответствие группы и динамически построить шаблон замены. Первая часть с круглыми скобками также нуждается в настройке из-за этих скобок.

Вот рабочее решение: 

function App() {
const [phone, setPhone] = React.useState('')

function maskPhone({ target: { value } }) {
    console.log(value)
    var reg  = /^(\d{1,2})(?:\s*(\d)(?:\s*(\d{1,4})(?:\s*(\d{1,4}))?)?)?$/
    setPhone(value.replace(/\D/g,'').replace(reg, (_,w,x,y,z) =>  
       ( w.length>0 ? `(${w}` : "") + ( x ? `) ${x}` : "") + ( y ? ` ${y}` : "") + ( z ? ` ${z}` : "") ))
    }
  
  return  <div>
      phone: <input type='text' onChange={maskPhone} value={phone} />
  </div>
}

ReactDOM.render(<App/>, document.querySelector('#root'))
<script src="https://unpkg.com/react@16/umd/react.development.js"></script>
<script src="https://unpkg.com/react-dom@16/umd/react-dom.development.js"></script>
<div id="root"></div>
...