У меня есть модуль, в котором мне нужно отформатировать значение текстового поля до xxxx-xxxxxxx. Теперь я уже определяю длину своего текстового поля с помощью e.target.value.length. Моя цель - когда обработчик определит длину 4, дефис автоматически присоединится после 3-го значения длины текстового поля. Бывший. xxxx - в настоящее время я использую react js.

Проблема: дефис вставляется в длину 4.

Цель: xxxx-xxxxxxx.

Вот мой обработчик:

 handleChange = (e) => {
    
    let val = e.target.id ? e.target.id : e.target.name
    
    var value = { [val]: e.target.value };

    if(val == 'mobile_number') {
      if(e.target.value.length === 4) {
        value = this.state.formData.mobile_number += "-"
      }
    }

    this.setState((prevState) => ({
      formData: {
        ...prevState.formData,
        ...value,
      },
    }));
    
  };

Вот мое текстовое поле mobile_number:

<input
  type="text"
  className="form-control r-5"
  id="mobile_number"
  value={mobile_number || ''}
  required
  onChange={this.handleChange}
  maxLength='12'
/>

Моя работа:

Sample

0
DevGe 23 Фев 2021 в 10:04

2 ответа

Лучший ответ

Вам нужно использовать значение из event.target вместо использования вашего состояния при добавлении дефиса. Это потому, что ваше состояние имеет значение «не обновлено», которое поступает от обработчика через событие.

Вместо

      if(e.target.value.length === 4) {
        value = this.state.formData.mobile_number += "-"
      }
    

Вы должны сделать что-то вроде, чтобы поддерживать оба случая при добавлении входов и при удалении входов:

      let value;
      if (
        event.target.value.length === 5 &&
        event.target.value.includes("-")
      ) {
        value = event.target.value.replace("-", "");
      }
      if (event.target.value.length === 4) {
        value = event.target.value + "-";
      }
    }}

Изменить: ссылка на песочницу -> https://codesandbox.io/s/add-hyphen-after-4-input-pxohf?file=/src/App.js

1
Stefan Zivkovic 23 Фев 2021 в 20:32

Вы можете сделать что-то вроде этого

let input = "78945612378584"
let firstFour = input.substring(0,4)
let last =  input.substring(4,input.length)
let d = firstFour+'-'+last
console.log(d) //"7894-5612378584"
0
abhay 23 Фев 2021 в 07:29