1. IT宝库
  2. 编程技术问答
  3. antd
以下是关于 antd 的编程技术问答
Antd表的分页道具
我正在使用ANTD库中的表组件.我想将分页支架传递给表组件.在文档中，它说传递了分页配置对象，该对象指的是分页组件本身. 所以我使用分页式组件道具将分页对象作为钥匙，例如 但是，当我检查反应器中的表组件时，我没有在组件道具中看到分页支架，但它在组件状态下，并且具有默认值. 如何将分页支架用于表组件? 解决方案 替换为" ShowpagesizeOptions"为" Showizechanger". 即.
0 2023-05-16
编程技术问答社区
为什么Ant设计中的`＜Input＞`没有onchange？
我知道我一定会缺少一些非常简单的东西 我想要更新输入的值. 我以为有类似onChange的东西，因为我能够将onChange与DatePicker和handleChange DropDown一起使用;但是我想我以为错误 当我查看文档时，有一个onPressEnter回调，但这并不能真正帮助我. 我尝试了以下内容: ，但这只是给了我一个我无法输入的输入. 重申: 为什么没有onChange Ant design的标签? 更重要的是，我如何获得 tag的值? 谢谢. 解决方案 您可以使用onChange，为什么不呢?
2 2023-05-08
编程技术问答社区
如何在 reactjs 中使用 antd 多个复选框？
我正在使用ANTD复选框.我正在使用价值数组来存储检查值，但是我需要存储未检查的价值数组. const plainOptions = ["Apple", "Pear", "Orange"]; const defaultCheckedList = ["Apple", "Orange"]; state = { checkedList: defaultCheckedList }; onChange = checkedList => { this.setState({ checkedList }); }; onCheckAllChange = e => { this.setState({ checkedList: e.target.checked ? plainOptions : [] })
4 2023-05-03
编程技术问答社区
在nuxtjs中模块化的导入UI库
我正在学习nuxtjs，我使用ant-design-vue作为我的UI库，我可以将库作为插件导入，并且可以正常工作 import Vue from 'vue' import Antd from 'ant-design-vue'; export default () => { Vue.use(Antd) } 但是，这在全球范围内导入组件，但是我想做的是将单个组件导入到特定页面中，而不是在全球范围全球进口. 例如，如果我的管理仪表板使用datepicker，我在应用程序上其他任何地方都使用它，我尝试在pages/dashboard/index.vue 中使用它 Primary Default Dashed
10 2023-05-02
编程技术问答社区
TypeError: 无法读取未定义的Webpack的属性'0'。
我正在尝试创建一个ant-design的演示，因为我已经安装了蚂蚁设计 npm start 我有这个错误 dora: listened on 8000 📦 1/2 build modules/opt/lampp/htdocs/antddemo/node_modules/webpack/lib/ExternalModuleFactoryPlugin.js:19 const dependency = data.dependencies[0]; ^ TypeError: Cannot read property '0' of undefined at /opt/lampp/htdocs/antddemo/node_modules/webpack/lib/ExternalModule
0 2023-04-28
编程技术问答社区
使用reactjs和nodejs而不使用nextjs的Shopify应用？
我正在开发一个shopify应用程序，因此ReactJS处理UI部分并表达节点 - 处理Shopify auth的事物. Shopify网站中的教程 节点，react和nextjs 节点并没有reactjs 表达 我担心的是如何在没有reactjs服务器端渲染的情况下测试应用程序? 我们知道节点和反应运行一个单独的端口，那么我们如何使用Shopify处理身份验证? 我试图工作的方式是 用户输入应用程序 - > shopify-> auth success-> show react app. 更新:我正在使用蚂蚁设计，因此蚂蚁设计的SSR会有所帮助. 任何人请帮助我解决方案. 解决方案 经过一些研究，我得到了一个简单的解决方案，我添加了为我提供解决方案的链接. React应用程序正在端口3000 运行 在端口3001中运行的节点服务器 客户端的设置代理package.json to localhost:3001
16 2023-04-26
编程技术问答社区
使用React和Ant设计的浮动标签
对于我的React应用程序，我正在尝试使用浮动标签使用ANTD的模板构建一种形式，该模板与不同的输入类型仅使用样式使标签浮动.到目前为止，我已经能够将标签放在输入后面，但是当我将过渡 +转换为CSS代码时，它似乎根本不起作用. 这是我形式的一部分: switch (data.inputType) { case 'input': return ( {data.label}
6 2023-04-25
编程技术问答社区
变量"$file "得到无效的值{}；上传值无效
我正在使用graphql-request的graphQlclient将请求发送到我的服务器.我正在尝试通过执行以下操作来上传文件: const graphQLClient = new GraphQLClient('http://localhost:4000/graphql', { credentials: 'include', mode: 'cors', }); const source = gql` mutation uploadImage($file: Upload!) { uploadImage(file: $file) } `; const file: RcFile = SOME_FILE; // RcFile (from antd) extends File await graphQLClient.request(source, { file }); 但是，当我以这种方式将
0 2023-04-24
编程技术问答社区
如何在Next.js中用自定义主题配置Ant Design并支持CSS模块功能
我正在使用蚂蚁设计的SSR(使用Next.js)建立ReactJS项目基础.但是在我自定义 next.config.js 用于支持蚂蚁设计的配置后，我无法使用 css模块 功能. Next.js使用 [name] .module.css 文件命名支持CSS模块 会议 这是我的配置文件: next.config.js require('dotenv').config(); const lessToJS = require('less-vars-to-js') const fs = require('fs') const path = require('path'); const withSass = require('@zeit/next-sass'); const withLess = require('@zeit/next-less'); const withCSS = require('@zeit/next-css'); const withPlugins =
4 2023-04-22
编程技术问答社区
antd datepicker(date.clone/date.load不是函数)
我有一个React应用程序.有一个复选框禁用datepicker.但是，当我使用复选框将其禁用时，我无法选择任何日期.如果我删除复选框及其功能，则没有错误.目前，我得到了: date.clone不是函数 错误. const dateFormat = "YYYY-MM-DD"; const today = moment(); const [date, setDate] = useState(today); const [disabled, setdisabled] = useState(false); const onCheckboxHandle = (e) => { if (e.target.checked) { setwarntill(moment("2090-10-10")); setdisabled(true); } else { setwarntill(today); setdisabl
24 2023-04-22
编程技术问答社区
如何配置Next.js的Antd/Less和Sass/CSS模块
我想使用 next.js 使用SASS和CSS模块，但也想使用 ant Design ，想将较小的样式用于较小的建筑物尺寸. 我能够启用CSS模块或更少的加载程序，但不能同时启用. Next.js的示例没有帮助我解决这个问题. 解决方案 编辑:对于Next.js的当前版本，此答案肯定已过时，请检查下面的其他答案. 经过多个小时的研究，我现在发现了正确的解决方案，并希望分享它: .babelrc(这里没有魔术) { "presets": ["next/babel"], "plugins": [ [ "import", { "libraryName": "antd", "style": true } ] ] } next.config.js: /* eslint-disable */ const withLess = require('@zeit/next
2 2023-04-22
编程技术问答社区
尾风 +蚂蚁设计:按钮颜色为白色，但有自己的颜色，我将其悬停
我使用我的下一个项目应用了尾风CSS和蚂蚁设计. 我发现主按钮有白色. ，但是当鼠标翻阅时，它显示了自己的主按钮颜色. global.css @tailwind base; @tailwind components; @tailwind utilities; @layer base { h1 { @apply text-2xl; } h2 { @apply text-xl; } /* ... */ } @import '~antd/dist/antd.css'; home.module.css .container { padding: 0 2rem; } .main { min-height: 100vh; padding: 4rem 0; flex: 1; display: flex; flex-direction: column; just
20 2023-04-22
编程技术问答社区
nextjs生产应用程序上的页面刷新刷新样式
我有一个网站，该网站构建了nextJS，该网站可以在刷新页面上打破样式，或者用户直接访问网站到特定路线而不是根路由时.例如，例如刷新并查看) 该网站托管在Firebase功能上，并使用nextJs和 ant Design Design组件. 刷新之前的屏幕截图 刷新后该站点的屏幕截图(请注意缺少的NAV) NAV并没有完全缺少，但它变成了一个移动导航，其图标未显示，但是在NAV区域周围悬停时，您可以通过NAV链接进行下拉列表. 我的next.config.js 在 const withCss = require('@zeit/next-css') module.exports = withCss({ webpack: (config, { isServer }) => { if (isServer) { const antStyles = /antd\/.*?\/style\/css.*?/ const orig
40 2023-04-22
编程技术问答社区
如何在React中向另一个组件传递道具？
因此，我在第一列中有一个带有搜索过滤器onpressenter的表组件，我希望我的搜索栏组件基本上做同样的事情. 在我的表格中，我想将confirm()传递给searchbar.js const columns = [ { key: "1", title: "Title", dataIndex: "title", render: (text) => {text}, sorter: (record1, record2) => record1.title.localeCompare(record2.title), filterDropdown: ({ setSelectedKeys, selectedKeys, confirm }) => { return (
4 2023-04-21
编程技术问答社区
在React中把文件对象改为普通对象
请为我发布图像道歉，但不幸的是，我的问题只能通过图像更好地表示. 我正在使用我使用多个上传模式一个一个一个一个一个上载文件后，我将获得如下图像. 在这里，在文件上传后提交表单时，前两个对象被忽略. 已发送API调用的表单数据(如前两个对象，内容为undefined的内容> undefined，但适用于最后一个内容值作为二进制的内容) ) 简单的工作示例: 上传2和更多文件后，请在demo.tsx的第28行中注意console.log(e.fileList);.结果将是(第一个具有名称为文件但第二个为正常对象的对象) ) 我想以与对象相同的格式具有两个对象值.您能指导我为什么文件上传后，最后一个具有普通对象，而其他先前上传的则具有文件对象? 如果我上传三个文件，那么我必须调用有效载荷如下的三个API， 第一个文件的有效负载api呼叫 https://i.stack.imgur.com/s23in .png 第二个API调用的有效负载
10 2023-04-20
编程技术问答社区
如何删除文件上传中的错误信息？
我正在使用在这里，我们设定了仅上传 3 JPEG图像的规则. rules={[ { required: true }, { max: 3, message: "Only 3 attachments are allowed", type: "array" } ]} 问题: 在这里，当我们上传3 JPEG文件时，很好. 如果我们以JPEG的方式上传第四文件，则显示错误也可以. 但是，当我们将第4个文件上传为无效文件时，错误仍然显示出不正确的. 复制步骤: - >上传3 JPEG文件， - >上传第四文件，该文件是另一种格式而不是JPEG . 如果您观察结果，则在UI中将忽略上传的文件，但我们仍然将错误消息视为Only 3 attachments are allowed. 请参阅上面的图像以获取更好的表示.将第4个文件上传为.html格式，因此在模态弹出窗口中获取错误，但规则错误消
8 2023-04-20
编程技术问答社区
Reactjs中的Antd文件上传验证
我正在使用 antd Design ，它使文件上传很好. }>Upload png only 在这里我有一个beforeUplaod函数，其代码看起来像 const beforeUpload = (file) => { const isPNG = file.type === "image/png"; if (!isPNG) { message.error(`${file.name} is not a png file`); } // return Upload.LIST_IGNORE; (This will work in newer version but I am using older one which is 4.9.4. } 正如我在上述代码中提到的那样，如果上传的图像不是png，则它将从当
4 2023-04-20
编程技术问答社区
ANTD多选择选定的项目颜色或自定义样式
我正在使用这种多选择的antd 它的工作非常好，我想像每个选定的项目都有特定的颜色.antd MultiSelect?antd提供了一些诸如Labelinvalue之类的道具，但我很困惑如何使用它们没有提供足够的细节. 解决方案 您可以使用CSS或更少变量修改所选项目的颜色对于更少变量的ANTD说明. 要使用CSS，打开Node_modules文件夹，查找ANTD，打开ES文件夹，打开您使用的ANTD组件，打开样式文件夹，然后打开index.js文件.在那里，您可以找到可以修改的CSS元素.创建一个CSS文件，更改CSS元素上的颜色属性，然后将CSS文件连接到JavaScript/HTML MultiSelect.
46 2023-04-05
编程技术问答社区
热门专题
ueditor 右键菜单 设置图片 wpf 多屏显示应用 centos8安装vncserver Dubbo中方@Autowired出现空指针异常 geos gdal区别 latex 如修改输出pdf名字 grep过滤以e开头的 java bytes方式上传文件 excel动态表头导出 java WPF 关闭窗体 OutOfMemoryException java 调用Windows锁屏 编写自己的make menuconfig windows下安装配置winpcap golang http包, rpc包 .net 第三方文件选择对话框 windows OpenVPN指定客户端IP el-popconfirm不生效 win10 confluence 破解 restfull api 源码 vue chrome 调试