Reactjs 中的 Antd 步骤表单验证

Question

我一直在尝试与ANTD进行步骤创建形式验证，但我正在努力验证部分。我的目标是，如果字段未正确填充，我无法单击下一步。据我了解，我必须每次点击下一步单击时都会提交表单，但是由于我是一个初学者，我不知道该如何使用嵌套组件进行操作。配置文件组件嵌套在第三步中。你能帮我吗？

const { Step } = Steps;

const steps = [
    {
        title: 'First',
        content: 'First-content',
    },
    {
        title: 'Second',
        content: 'Second-content',
    },
    {
        title: 'third',
        content: <Profile/>,
    },
    {
        title: 'last',
        content: 'Third',
    },
];

const ListingSteps = () => {
    const [current, setCurrent] = useState(0);
    const onChange = current =>{
        setCurrent(current)
    }
 const next = () => {
        setCurrent(current + 1);
    };

    const prev = () => {
        setCurrent(current - 1);
    };

    return (
        <>
            <Steps current={current} onChange={onChange}>
                {steps.map(item => (
                    <Step key={item.title} title={item.title} />
                ))}
            </Steps>
            <div className="steps-content">{steps[current].content}</div>
            <div className="steps-action">
                {current < steps.length - 1 && (
                    <Button type="primary" onClick={() => next()}>
                        Next
                    </Button>
                )}
                {current === steps.length - 1 && (
                    <Button type="primary" onClick={() => message.success('Processing complete!')}>
                        Done
                    </Button>
                )}
                {current > 0 && (
                    <Button style={{ margin: '0 8px' }} onClick={() => prev()} >
                        Previous
                    </Button>
                )}
            </div>
        </>
    );

轮廓

function Profile() {
    
    return(
        <>
           <Form name="profile" >
                            <Form.Item  name="name" label='Name' rules={[{required:true, message:'Please enter your name' }]}>
                                <Input/>
                            </Form.Item>
                            <Form.Item name="surname" label='Surname' rules={[{required:true, message:'Please enter your name' }]}>
                                <Input/>
                            </Form.Item>
           </Form>
        </>
            

Answer 1

使用form.validateFields()。
当您单击“下一步”按钮时，您可以通过在 validateFields 中传递所有字段 name 来检查当前步骤的所有必填字段。
例如，在您的配置文件组件中，您有两个字段：name & 姓氏
您可以通过以下方式验证字段：

const onNext = async () => {
        try {
            await form.validateFields(['name', 'surname']);
            setCurrent((prev)=>prev + 1);
        } catch {}
    };

在步骤列表的每个对象中再添加一个键，并为该步骤组件传递一组表单字段名称。

const steps = [
    {
        title: 'third',
        content: <Profile/>,
        fields: ['name', 'surname']
    },
    ....
];

现在，您可以通过从步骤数组获取每个步骤字段来验证每个步骤组件。

await form.validateFields(steps[current].fields);

检查 FormInstance API：
https://ant.design/components/form/#FormInstance