Pogman25 Aug 30 2018 at 18:15

Работа с формами в React.js, используя базовый инструментарий

6 min

37K

JavaScript*ReactJS*

From sandbox

Comments 12

frozen_coder Aug 30 2018 at 20:08

Вместо Redux-Form, React-Redux-Form используйте react-final-form или formik. Они не используют Redux и имеют довольно удобное и гибкое API, валидация и проч. плюшки в комплекте.

Pogman25 Aug 30 2018 at 22:30

Спасибо за комментарий, о react-final-form не слышал ранее, обязательно посмотрю, а Formik знаю, даже успел пощупать его, удобная библиотека, у меня в закладках. Но основная цель статьи была показать, как можно использовать концепцию HOC на примере формы.

asksimon Aug 31 2018 at 17:31

Тема глубже, попробуйте реализовать добавление маски и форматирования в пропсы филда формы !?)

Pogman25 Aug 31 2018 at 17:33

спасибо за комментарий, я эту тему уже развиваю, но здесь всё не поместилось.
На одном из проектов мне приходило от сервера описание формы в виде массива с объектами, в которых были тип каждого инпута, атрибуты и прочее. Надо было слать предварительный запрос для создания формы, а потом из полученных данных её собирать. Я постараюсь написать об этом следующую статью.

apapacy Aug 31 2018 at 20:56

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

Pogman25 Sep 4 2018 at 09:25

спасибо за комментарий, согласен с вами, но я читал статью, в которой говорилось, что в вашем кастомном компоненте надо стараться предусмотреть возможность передать все html атрибуты, которые могут понадобиться, поэтому id я посчитал важным и передал. В целом, его можно не заполнять

faiwer Sep 3 2018 at 21:34

const isValid = Object.keys(data).reduce(
        (sum, item) => sum && this.validate(item, data[item]),
        true
    );

Array.prototype.every? :)

Pogman25 Sep 4 2018 at 09:26

спасибо за комментарий, я про every него забыл, вполне подойдёт

sigrishchenko Sep 4 2018 at 09:20

Мне кажется метод validate работает не так как ожидается. Указание второго параметра в setState это callback который будет вызыван асинхронно в тот момент когда стейт изменится. В этот callback можно написать какyю-то дополнительную логику но возвращаемое значение будет проигнарировано. Поэтому в строке () => false нет смысла. Но почему же тогда все работает?! Похоже что в случае, когда строка пустая метод возвращает undefined, который в логическом выражении неявно приводится к false. Мне кажется следут явно написать return false, это сделает код более понятным.

Pogman25 Sep 4 2018 at 09:30

спасибо за комментарий, согласен, там стоит добавить return для более явного поведения

pelayo Sep 17 2018 at 11:19

Спасибо за статью, поясните пожалуйста, зачем нужна ещё одна обёртка, почему не передавать initialState, requiredFields во Wrapper?

Pogman25 Sep 29 2018 at 22:05

Всегда пожалуйста, вам тоже спасибо за комментарий и прошу прощения, что долго не отвечал.
Это сделано для больше для удобства, в целом, можно передать начальные значения и во Wrapper, а потом перед возвращением нового класса обработать эти значения и передать в конструктор. Кроме удобства это делается для разделения ответственности, как правило HOC получает только компонент и возвращает компонент, а вся логика обработки дополнительных значений вынесена на уровень выше, например, если посмотреть тот же connect из react-redux, он реализован примерно также. Кроме этого, на официальном сайте говорится, что такой паттерн предпочтительней
https://reactjs.org/docs/higher-order-components.html

Show the best of all time