React Antd 关于Input表单清空的坑

Posted 2023-04-28

参考技术A 表单清空有一个方法

试了一下没法清空，没反应
经过一系列实践终于成功了
注意事项
1.必须是用下面的方法生成的才能清空

试了一下，直接使用Input组件，结果不能清空，要用getFieldDecorator生成的才可以

不可以直接在Button的点击事件里面写,比如下面的没法清空

这样子没法清空
得用一个函数

这样子才能成功

react脚手架（create-react-app）配置antd中css按需加载的坑

题图 By Clm From Bing

今天没事，准备利用react写一个后台管理系统，但是在刚创建项目引入antd的时候，就遇见了一个神坑！！！

再说坑之前，咱们先来说一下如何利用create-react-app搭建项目和引入ant。

想利用create-react-app搭建基本项目，首先全局应该有这个工具

cnpm i create-react-app -g

在全局安装完之后，就可以利用create-react-app初始化项目了

create-react-app admin('项目名')// 下完包后 进入admin目录cd admin// 然后就可以将项目跑起来yarn start

这样我们就很顺利的完成了react的基本结构搭建

接下来我们就可以在项目中配置antd

1、下载antd

cnpm i antd -S

2、配置antd按需加载css 首先下载babel-plugin-import

cnpm i babel-plugin-import -S

3、再创建.babelrc文件

{ "plugins": [ ["import", { "libraryName": "antd", "style": "css" }]  ]}

4、最后在项目中引入antd组件

import { Button } from 'antd';<Button type="primary">Primary</Button><Button>Default</Button>

5、当你们看到这的时候，你们会发现，这不正常操作么，没有什么坑啊，但是你会发现antd的样式没有起作用，？？？？满脑子疑问，这里其实错的不是我们，也不是antd，而是这个脚手架，他默认是不使用.babelrc的，可以在node_module/react-scripts/config/webpack.config.dev.js中看到

6、所以需要将上图中的false改为true才大功告成

欢迎关注、转发、点击好看