Сидишь, переписываешь старый проект на новую дизайн-систему и тут оно.
Модальное окно.
И если предыдущей системе было всё равно на расположение кнопок отмены, сохранения — определил в форме и ладно — новая требует положить кнопки в
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