Как исправить метод handleChange для вывода пользовательского ввода в желаемый результат?

Question

У меня есть два поля под названием широта и долгота

<TextBoxField
  id="location-latitude-control"
  title="Required: Latitude"
  name="location.latitude"
  value={location.latitude}
  handleChange={this.handleChange}
  handleBlur={this.handleBlur}
/>

<TextBoxField
  id="location-longitude-control"
  title="Required: longitude"
  name="location.longitude"
  value={location.longitude}
  handleChange={this.handleChange}
  handleBlur={this.handleBlur}
/>

Для широта мне нужно, чтобы желаемый результат был в формате XX.xxxxxx путем добавления начальных и конечных нулей на основе на данных

Для долготы , мне нужно, чтобы желаемый результат был в формате XXX.xxxxxx путем добавления начальных и конечных нулей на основе данных

Как можно Я исправляю свой метод handleChange для правильного форматирования ввода пользователя:

handleChange = e => {
    const val = e.target.value;
    return Math.sign(val) === -1
    ? Math.abs(val) > 10
    ? "-" + Math.abs(val).toFixed(6)
    : "-0" + Math.abs(val).toFixed(6)
    : Math.abs(val) > 10
    ? Math.abs(val).toFixed(6)
    : "0" + Math.abs(val).toFixed(6);
}

Ожидаемое поведение для широты:

".12" should convert it to "00.120000"
"-1.1", should allow to input "-01.100000"
"-1.23", should allow to input "-01.230000"
"-30", should allow to input "-30.000000"
"12.25", should allow to input "12.25000"
"7.0", should allow to input "07.000000"
"12", should allow to input "12.000000"

Ожидаемое поведение для долготы:

".12" should convert it to "000.120000"
"-1.1", should allow to input "-001.100000"
"-1.23", should allow to input "-001.230000"
"-30", should allow to input "-030.000000"
"12.25", should allow to input "012.25000"
"7.0", should allow to input "007.000000"
"12", should allow to input "012.000000"

Answer 1

Вам нужно создать две функции для обработки широты и долготы.

handleLatitudeChange = e => {
    const val = e.target.value;
    const valSign = Math.sign(val);
    val = Math.abs(val).toFixed(6);
    if(Math.abs(val) < 10)  val = `0${val}`;
    if(valSign === -1)  val = `-${val}`;
    return val;
}
handleLongitudeChange = e => {
    const val = e.target.value;
    const valSign = Math.sign(val);
    val = Math.abs(val).toFixed(6);
    if(Math.abs(val) < 10)  val = `00${val}`;
    else if(Math.abs(val) < 100)    val = `0${val}`;
    if(valSign === -1)  val = `-${val}`;
    return val;
}

Answer 2

Используйте функцию mapNumber для форматирования данных.

Первый параметр - это число, которое вы хотите отформатировать, второй параметр - это количество начальных нулей, которые нужно добавить, а третий параметр - это количество конечных нулей будет добавлено.

function mapNumber(num, leading, trailing) {
  var s = num.toFixed(trailing) + "";
  while (s.length <= leading + trailing) s = "0" + s;
  return s;
}

console.log('Latitude: ', mapNumber(3.2458, 2, 6));
console.log('Longtitude: ', mapNumber(11.764, 3, 6));