Как проверить несколько форм одновременно - PullRequest
Новая
       57

Как проверить несколько форм одновременно

0 голосов
/ 27 июня 2019

У меня очень большая форма, разделенная на 6 форм (каждая из которых отображается в компоненте и доступна через вкладки) только с одной кнопкой отправки (в родительском компоненте 6 форм).Каждая форма имеет свою собственную схему проверки (используя Yup), работающую (она работает над изменением ввода и размытием).Все данные получены и обновлены до состояния Redux.Создатель действия отправляется при нажатии кнопки отправки и отправке соответствующих данных на сервер, но мне нужно проверить (перед отправкой действия), действительны ли все поля (в родительском компоненте).

I 'Я скоро добавлю немного кода в CodeSandbox, но я спрашиваю, прежде чем код будет готов, потому что я тороплюсь с этой функциональностью и, возможно, кто-то знает, как решить мою проблему.

1 Ответ

0 голосов
/ 30 июня 2019

Грубая реализация

Один из способов состоит в том, чтобы структурировать ваше приложение так, чтобы у вас был один элемент <form> в компоненте верхнего уровня и все 6 подчиненных элементов были бы потомками этого <form>. Вам нужно будет удалить теги <form> со всех 6 ваших подчиненных форм.

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

Может быть возможно пометить каждое входное имя префиксом, таким как form-one-..., form-two-..., отфильтровать ваши входные данные в handleSubmit() и классифицировать их по подчиненной форме.

Затем вы можете отправить входные значения каждой подчиненной формы для проверки. 

class MainForm extends Component {
    handleSubmit = event => {
        const { /*...get inputs here */ } = event.target

        // Do some work with data.

        // Make a POST request to API.
    }

    render() {
        return (
            <form onSubmit={this.handleSubmit}>
                <SubformOne />
                <SubformTwo />
                <SubformThree />
                <SubformFour />
                <SubformFive />
                <SubformSix />

                <button type="submit">Submit</button>
            </form>
        )
    }
}
...