問題：

Warning: [antd: Form] antd v4 removed `Form.create`. Please remove or use `@ant-design/compatible` instead.

原因：

v4 的 Form 不再需要通過?Form.create()?創建上下文。Form 組件現在自帶數據域，因而?getFieldDecorator?也不再需要，直接寫入 Form.Item 即可

antd3方案：

// antd v3 const Demo = ({ form: { getFieldDecorator } }) => (<Form><Form.Item>{getFieldDecorator('username', {rules: [{ required: true }],})(<Input />)}</Form.Item></Form> );const WrappedDemo = Form.create()(Demo);

antd4方案：

getFieldDecorator類似于這些，都廢棄了。

// antd v4 const Demo = () => (<Form><Form.Item name="username" rules={[{ required: true }]}><Input /></Form.Item></Form> );

由于移除了 Form.create()，原本的 onFieldsChange 等方法移入 Form 中，通過 fields 對 Form 進行控制。

antd4從表單獲取數據：

表單的數據函數都可以寫在Form里面，成功獲取onFinish，獲取失敗onFinishFailed

import { Form, Input, Button, Checkbox } from 'antd';const Demo = () => {const onFinish = (values: any) => {console.log('Success:', values);};const onFinishFailed = (errorInfo: any) => {console.log('Failed:', errorInfo);};return (<Formname="basic"labelCol={{ span: 8 }}wrapperCol={{ span: 16 }}initialValues={{ remember: true }}onFinish={onFinish}onFinishFailed={onFinishFailed}autoComplete="off"><Form.Itemlabel="Username"name="username"rules={[{ required: true, message: 'Please input your username!' }]}><Input /></Form.Item><Form.Itemlabel="Password"name="password"rules={[{ required: true, message: 'Please input your password!' }]}><Input.Password /></Form.Item><Form.Item name="remember" valuePropName="checked" wrapperCol={{ offset: 8, span: 16 }}><Checkbox>Remember me</Checkbox></Form.Item><Form.Item wrapperCol={{ offset: 8, span: 16 }}><Button type="primary" htmlType="submit">Submit</Button></Form.Item></Form>); };ReactDOM.render(<Demo />, mountNode);

總結

以上是生活随笔為你收集整理的antd4中Form.create已废弃的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。