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

[frozen_coder]

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

[Pogman25]

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

[asksimon]

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

[Pogman25]

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

[apapacy]

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

[Pogman25]

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

[faiwer]

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

Array.prototype.every? :)

[Pogman25]

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

[sigrishchenko]

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

[Pogman25]

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

[pelayo]

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

[Pogman25]

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