我正在创建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
,因此出错。
在进行下一步之前,如何验证第一步中的金额字段?
1条答案
按热度按时间ee7vknir1#
你需要先初始化表单示例。
并将其传递给您的窗体
只有在那之后你才能使用它。