Скрыть следующую кнопку, пока значения не будут заполнены в React Final Form Wizard

Question

Я смотрю на пример формы мастера из формы React Final.

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

Что я думаю, так это то, что должна быть возможность проверить, какой шаг в данный момент активен и каким-то образом вывести состояния входов, присутствующих на этом шаге. Если все входы имеют значения, покажите кнопку, в противном случае скройте ее.

Идея состоит в том, чтобы динамически проверять входные данные, присутствующие на шаге (так как они могут изменяться в ходе разработки, так что лучше на самом деле искать присутствующие входные данные, а не проверять с помощью жесткого кода определенные состояния и имеют ли они значения).

Полный пример здесь: https://codesandbox.io/s/km2n35kq3v
(код для кнопок находится в Wizard.js в строке 73)

Answer 1

Как насчет создания требуемых значений (с правилами валидации) и отображения кнопки только тогда, когда форма верна?

См. Wizard.js, строки 64, 73 и 74.

Это не на 100% идеально, так как ваша проверка может иметь более сложные правила, и вы не сможете получить значение из неудачной отправки, помечая все поля как touched, но это близко.