Обрезка полей с помощью рекурсивной функции не работает должным образом - PullRequest
Новая
       7

Обрезка полей с помощью рекурсивной функции не работает должным образом

0 голосов
/ 03 апреля 2020

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

const trimFields = form => _.forIn(form, element => isObject(element) ? trimFields(element) : trimText(element))

Но это совсем не работает, просто кажется, что оно сохраняет первоначальное значение.

Что я здесь не так делаю?

Fiddle

Ответы [ 2 ]

1 голос
/ 03 апреля 2020

Ваша рекурсивная функция никогда не модифицирует form и не возвращает что-то полезное. Вам необходимо изменить ключи вашего объекта, когда вы встречаете значение со строкой (или необъектом). Если вы встречаете значение с объектом, вы можете вызвать свою функцию снова, чтобы обрезать его значения. 

const trimFields = form => _.forIn(form, (element, k) => {
  if(_.isObject(element)) {
    trimFields(element)
  } else {
    form[k] = _.trim(element); // set the object's key to be the trimmed version of its element
  } 
});

trimFields(form);
// set the values of the elements...

Выше не требуется методов loda sh, и вы можете использовать стандартные встроенные структуры для выполните то, что вы после.

С учетом сказанного, я предлагаю вам использовать _.mapValues() для создания нового объекта формы вместо изменения вашего текущего объекта формы. Это работает, возвращая новое значение, которое должен принять объект. Если element является объектом, вы можете рекурсивно выполнить его для него, чтобы отобразить объекты element s. Если это не объект, вы можете использовать метод loda sh _.trim() для возврата усеченного значения для текущего значения объекта. 

const trimFields = form => _.mapValues(form, 
  element => _.isObject(element) ? trimFields(element) : _.trim(element)
);

См. Пример ниже: 

const form = {name: '   John Doe   ', email: 'john@doe.com', handle: 'jdoe', social: { facebook: '    John Doe\'s page', twitter: '@jdoe'}};

const trimFields = form => _.mapValues(form, 
  element => _.isObject(element) ? trimFields(element) : _.trim(element)
);

const new_form = trimFields(form);
document.getElementById('name').value = new_form.name;
document.getElementById('email').value = new_form.email;
document.getElementById('handle').value = new_form.handle;
document.getElementById('facebook').value = new_form.social.facebook;
document.getElementById('twitter').value = new_form.social.twitter;
<script src="https://cdnjs.cloudflare.com/ajax/libs/lodash.js/4.17.15/lodash.min.js"></script>
<div style="display: flex; flex-direction: column">
  <input type="text" id="name" />
  <input type="email" id="email" />
  <input type="text" id="handle" />
  <input type="text" id="facebook" />
  <input type="text" id="twitter" />
</div>
0 голосов
/ 03 апреля 2020

Хорошо в скрипке при условии, что вы:

  1. на самом деле никогда не запускают trimFields. trimFields (форма) отсутствует.
  2. заполняет входные данные данными в form. Значения, которые вы собираетесь обрезать, никогда не используются для заполнения полей формы. Другими словами, вы не изменяете свой оригинальный form объект.
...