reactjs 如何在Ant Design和React中对表单字段进行多步验证?

mftmpeh8  于 2023-03-17  发布在  React
关注(0)|答案(1)|浏览(147)

我正在创建Ant Design多步骤的形式,我需要验证我的每一步之前,下一步的形式领域。
我删除了一些代码,下面是我的代码总结:
我的App.js代码:

import { Button, Steps, Modal, Result } from "antd";
import React, { Component } from "react";
import AmountStep from "../components/AmountStep";

const { Step } = Steps;
const steps = [
  {
    title: "Amount",
    content: <AmountStep />,
    fields: ["amount"]
  },
  {
    title: "Recipient",
    content: <RecipientStep />,
    fields: ["name", "family"]
  },
  {
    title: "Verification",
    content: <Verification />
  },
  {
    title: "Review",
    content: <Review />
  }
];

class App extends Component {
  state = {
    current: 0,
  };

  render() {
    // const user = this.props.user;
    return (
      <>
        <div className="steps-container">
                  <Steps current={this.state.current} form={this.props.form}>
                    {steps.map(item => (
                      <Step key={item.title} title={item.title} />
                    ))}
                  </Steps>
                  <div className="steps-content">
                    {steps[this.state.current].content}
                  </div>
                  <div className="steps-action">
                    {this.state.current > 0 && (
                      <Button
                        style={{
                          margin: "0 8px"
                        }}
                        onClick={this.prev}
                      >
                        Previous
                      </Button>
                    )}
                    {this.state.current < steps.length - 1 && (
                      <Button type="primary" onClick={this.next}>
                        Next
                      </Button>
                    )}
                    {this.state.current === steps.length - 1 && (
                      <Button type="primary">
                        Confirm
                      </Button>
                    )}
                  </div>
                </div>
      </>
    );
  }

  next = async () => {
    try {
      const validate = await form.validateFields(["amount"]);
      this.setState({ current: this.state.current + 1 });
    } catch {
//return some msg...
    }
  };
  prev = () => {
    this.setState({ current: this.state.current - 1 });

  };
}

export { App };

和AmountStep组件:

import { Row, InputNumber, Form } from "antd";
import "antd/dist/antd.css";
import React, { Component } from "react";

class AmountStep extends Component {

  render() {
    return (
      <>
        <Row className="form-container recipient-step">
          <h2 className="form-title">amount</h2>
          <Form name="recipient-form" layout="vertical">
            <div className="amount">
              <Form.Item
                name="amount"
                label="Amount:"
                rules={[
                  {
                    required: true,
                    message: "Please input your Amount!"
                  }
                ]}
              >
                <InputNumber
                  style={{ width: "100%" }}
                  name="amount"
                  min={50}
                />
              </Form.Item>
            </div>
          </Form>
        </Row>
      </>
    );
  }
}

export default AmountStep;

form.validateFields(["amount"]);中未定义form,因此出错。
在进行下一步之前,如何验证第一步中的金额字段?

ee7vknir

ee7vknir1#

你需要先初始化表单示例。

const [form] = Form.useForm();

并将其传递给您的窗体

<Form form={form} />

只有在那之后你才能使用它。

相关问题