#фишка дня

Сидишь, переписываешь старый проект на новую дизайн-систему и тут оно.

Модальное окно.

И если предыдущей системе было всё равно на расположение кнопок отмены, сохранения — определил в форме и ладно — новая требует положить кнопки в Modal.Footer.

И всё бы ничего, но у тебя там форма. И не просто форма, а Redux Form-зависимая. И у неё свой внутренний обработчик submit. И снаружи его триггернуть — как-то многовато работы получается. И мешать в кучу компоненты модалки с компонентами формы неохота — всё протестировано давно, зачем трогать.

Что же делать? Очень просто! У button type="submit" имеется атрибут form, в котором — да, правильно — указывается id нужной формы. По аналогии с for у label. И клик по кнопке отправит форму, которая может быть расположена где угодно на странице.

<form id="test" onSubmit={() => null}>
  <input type="text" name="name">
</form>
<button type="submit" form="test">Submit</button>

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

Я не представляю, зачем конкретно это может понадобиться (визард?), но вот случай с кнопкой отправки — более чем реален. Плюс, так можно отправлять разные формы по разным условиям без дублирования компонента.

#form