作者热门文章
- html - 出于某种原因,IE8 对我的 Sass 文件中继承的 html5 CSS 不友好?
- JMeter 在响应断言中使用 span 标签的问题
- html - 在 :hover and :active? 上具有不同效果的 CSS 动画
- html - 相对于居中的 html 内容固定的 CSS 重复背景?
我使用 Ant Design 运行 React 并收到此错误:
Instance created by 'useForm' is not connect to any Form element. Forget to pass 'form' prop?
代码:
// .../services/index.js
export { default as registerService } from './registerService'
// .../services/registerService.js
import axios from '../../../configs/api.service'
const registerService = (form) => {
return {
validatePasswordAndConfirmPassword: async (rule, value) => {
if (value && value !== form.getFieldValue(['user', 'confirmPassword'])) {
throw new Error('Password and Confirm Password must be same')
}
},
register: async user => {
const { data } = await axios.post('/users', user)
const { _id, username } = data
console.log('Register Success:', `User ${username} is created, You get ID: ${_id}`)
return data
},
}
}
export default registerService
// Register Component
import React from 'react'
import { Button, Form, Input } from 'antd'
import { registerService } from '../../services/'
const Register = () => {
const [form] = Form.useForm()
const service = registerService(form)
const onFinish = async ({ user }) => {
try {
await service.register(user)
} catch (err) {
console.error('Register Failed:', err.response)
}
}
const onFinishFailed = errorInfo => {
console.error('Failed:', errorInfo)
}
return (
<>
<Form {...layout}
name="Register"
onFinish={onFinish}
onFinishFailed={onFinishFailed}
validateMessages={validateMessages}
>
<Form.Item
name={['user', 'username']}
label="Username"
rules={[
{ required: true },
]}
>
<Input />
</Form.Item>
<Form.Item
name={['user', 'password']}
label="Password"
rules={[
{ required: true },
{ validator: service.validatePasswordAndConfirmPassword },
]}
>
<Input.Password />
</Form.Item>
<Form.Item
name={['user', 'confirmPassword']}
label="Confirm Password"
rules={[
{ required: true },
{/*{ validator: service.validatePasswordAndConfirmPassword },*/}
]}
>
<Input.Password />
</Form.Item>
<Form.Item {...tailLayout}>
<Button type="primary" htmlType="submit">Submit</Button>
</Form.Item>
</Form>
</>
)
}
export default Register
如何修复这个错误?
最佳答案
好的...我已经修好了
我只是将属性 form={form}
传递到 Form 组件中。如第 4 行
const [form] = Form.useForm()
<Form {...layout}
form={form}
name="Register"
onFinish={onFinish}
onFinishFailed={onFinishFailed}
validateMessages={validateMessages}
>
<Form.Item
name={['user', 'username']}
label="Username"
rules={[
{ required: true },
]}
>
<Input />
</Form.Item>
<Form.Item
name={['user', 'password']}
label="Password"
rules={[
{ required: true },
{ validator: service.validatePasswordAndConfirmPassword },
]}
>
<Input.Password />
</Form.Item>
<Form.Item
name={['user', 'confirmPassword']}
label="Confirm Password"
rules={[
{ required: true },
{ validator: service.validatePasswordAndConfirmPassword },
]}
>
<Input.Password />
</Form.Item>
<Form.Item {...tailLayout}>
<Button type="primary" htmlType="submit">Submit</Button>
</Form.Item>
</Form>
关于javascript - Antd 4.0.0 : How to use form. getFieldValue() 和所有表单的 API 为 `const [form] = Form.useForm` ?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/60464651/
我是一名优秀的程序员,十分优秀!