Question

我有一个很大的表单，分为6个表单（每个表单都呈现在一个组件中，并且可以通过选项卡访问），只有一个提交按钮（在6个表单的父组件上）。每个表单（使用Yup）都有自己的验证模式（正在处理输入更改和模糊处理）。所有数据均从Redux状态获取并更新为Redux状态。单击提交按钮并将相关数据发送到服务器时，将调度动作创建者，但是我需要检查（在调度动作之前）所有字段（在父组件中）是否有效。

我很快就会在CodeSandbox中放入一些代码，但是我要在代码准备就绪之前询问一下，因为我急于使用该功能，也许有人知道如何解决我的问题。

Answer 1

Rough implementation

一种方法是构造应用程序，以便在顶层组件上拥有一个<form>元素，并使所有6个子表单成为该<form>的子元素。您需要从所有6个子表单中删除<form>标签。

这种方法的一个警告是，您不能按子窗体对输入进行分组（或者至少我不认为可以）。

可能可以使用前缀标记每个输入名称，例如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>
        )
    }
}

如何同时验证多个表格

1 个答案: