antd4中Form.create已废弃

问题：

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已废弃相关推荐

解决白鹭引擎 egret 龙骨动画 Deprecated 已废弃
官方文档中龙骨动画的调用方法和事件监听方法,在实际项目中都会提示已废弃,在网上也没找到一个讨论和解决这个问题的帖子,就自己去摸索了一下,下面贴出解决方法. 这是网上找到的比较常见的写法: privat ...
react中ref已废弃，请使用React.createRef()
在项目开发过程中难免会从操作dom,在react中获取dom的方式 (1)ref(已废弃) //绑定ref <input ref="getInput"/> //获取do ...
antd如何获取表单的值_antd 父组件获取子组件中form表单的值
还是拿代码来讲吧,详情见注释子组件 import React, { Component } from 'react'; import { Form, Input } from 'antd'; con ...
keras系列︱Application中五款已训练模型、VGG16框架（Sequential式、Model式）解读（二）...
引自:http://blog.csdn.net/sinat_26917383/article/details/72859145 中文文档:http://keras-cn.readthedocs.io/ ...
react中form可以嵌套一个form吗_Ant-Design从v3升级到v4的Form适配
还记得3.0版本升级到4.0版本还是上午刚发生的事情,现在看到antd的版本已经是4.9.2了,离5.0还会远吗!要跟上脚步,体验最新的性能.视觉和神坑. 一.资料参考升级的说明文档[1]涵盖了所有 ...
keras系列︱Application中五款已训练模型、VGG16框架（Sequential式、Model式）解读（二）
不得不说,这深度学习框架更新太快了尤其到了Keras2.0版本,快到Keras中文版好多都是错的,快到官方文档也有旧的没更新,前路坑太多. 到发文为止,已经有theano/tensorflow/CNT ...
html中form表单标签的使用
在html中,表单是经常用到的,用来与用户交互并提交数据.今天要介绍的就是表单标签form标签 "form"作为英文单词有"表格"的意思 1.定义和用法标签是 ...
arcgis fishnet 单位_ArcGIS中使用Create Fishnet生成格网
ArcGIS 中使用 Create Fishnet 生成格网 1. 如果单元格的宽和高定义为 0 ,那么必须指定行与列的数目以及格网对角的坐标 2. 格网的范围可以手动输入,也可以引用已有数据为模板. ...
AI一分钟 | 腾讯将成立机器人实验室；机器翻译重大突破：中英翻译已达人类水平
整理 | 阿司匹林一分钟AI 腾讯AI Lab宣布与施普林格·自然集团旗下的自然科研正式达成战略合作,并宣布即将成立机器人实验室"Robotics X". 微软与雷德蒙研究院研发 ...

antd4中Form.create已废弃

antd3方案：

antd4方案：

antd4从表单获取数据：

antd4中Form.create已废弃相关推荐

最新文章

热门文章