在AntD Reactjs中,如何在表行按钮上打开模态并在模态中访问表的数据?
我正在ANTD表中显示用户数据,并且我在表中创建了编辑按钮,以访问每个行记录.我想在"编辑"按钮上打开模式,然后以模态获取各自的行数据.但是由于出现错误而无法做到: 'showmodal'未定义 版本: " antd":"^4.18.9", " axios":"^0.26.0", "反应":"^17.0.2", " react-dom":"^17.0.2", " react-router-dom":"^6.2.2" 我的数据来自 - 以下是我的代码 import React , {useState , useEffect } from 'react' import Layout, { Header, Content, Footer } from 'antd/lib/layout/layout'; import { Table, Row, Col } from 'antd'; import axios from 'axios'; import 'ant
0 2024-04-05
编程技术问答社区
如何使用.babelrc来使babel-plugin-import在antd中工作?
我是新手反应,babel和antd. 我安装了React,并使用Create-React-App启动了一个项目. 我安装了ANTD(Ant.Design).它建议使用babel-plugin-import,所以我也安装了. 如果我正确地解释它,则为Babel-Plugin-Import的使用文档说将其放在.babelrc文件中: { "plugins": [ ["import", { "libraryName": "antd", "style": true }] ] } 我很难让它起作用.我的网络控制台仍然有警告: 您使用的是一包ANTD,请使用 https://www.npmjs.coms.com/package/package/package/babel-plugin-import-import-import-import 减少应用程序捆绑包 尺寸. 我的项目目录中没有一个.babelrc文件,因此我使
0 2024-03-26
编程技术问答社区
获取ant.design表的另一列的值?
在我的react和 ant.design 基于以下列的表. const tableColumns = [{ title : 'Lorem', dataIndex : 'lorem' render: text => {text + ipsum} }, { title : 'Ipsum', dataIndex : 'ipsum' }]; 我想使用ipsum的值,即第一行的第二行渲染函数的第二列.在 ant.design 中,最好的推荐方法是什么? 解决方案 渲染函数的第二个参数是当前记录: render: (text, row) => {text + row.ipsum} >
0 2024-03-05
编程技术问答社区
我应该把提供者重构放在哪里?
我是新手的反应,我尝试做JWT身份验证,但是我发现的教程与我想使用的新的ANTD之间存在一些不兼容.如下所示, 我试图添加一个提供商,但我可能没有正确放置它可以帮我吗?这是我的登录页面: import React from 'react'; import { Form, Icon, Input, Button, Spin } from 'antd'; import { connect } from 'react-redux'; import { NavLink } from 'react-router-dom'; import * as actions from '../store/actions/auth'; import { Provider } from 'react-redux' const antIcon = ; class NormalLoginForm ext
4 2024-02-27
编程技术问答社区
如何使用reactjs在表单中添加动态验证
我在演示应用程序中使用ant design.我想在我的应用程序中添加手机号码的dynamic validation. 以我的形式有两个字段 选择字段 输入字段 我想在mobile in mobile in mobile中添加验证(手机号码为10位数字).换句话说,我想在输入字段上添加手机号码的验证仅当用户从选择框中选择mobile 这是我的代码 {getFieldDecorator("value", { rules: [ { required: true, message: "Please input search value!" }, { pattern: /[2-9]{2}\d{8}/, message: "Please input !" } ] })(
0 2024-02-27
编程技术问答社区
Antd表从动态数据中分组数据
我正在尝试构建一个ANTD表,其中有两个主列District, Exam Details.内部Exam Details列我想要三列 性别详细信息 候选人总数 通过的候选人总数 如下所示 我尝试了此代码: 解决方案 我已经更改了列为生孩子.它非常接近您想要实现的目标. const columns = [ { title: "District", dataIndex: "state_name", key: "state_name", render: (value, row, index) => { const obj = { children: value, props: {} }; console.log(obj.children, index); if (index % 3 === 0) {
0 2024-02-27
编程技术问答社区
Meteor + React + Antd-如何加快构建/重构时间?(避免减少插件延迟)
从我的流星项目中卸载的ANTD平均将构建时间降低了38-40.参考器表明,插件更少的需求> 38s来处理ANTD的巨大档案: VELOCITY_DEBUG=1 VELOCITY_DEBUG_MIRROR=1 METEOR_PROFILE=1 meteor | grep less ... | other plugin less.......................................38,766 ms (2) ... 当我卸载antd时,这个数字降至 | other plugin less..........................................572 ms (2) > 30年代的时间太长了,无法在开发过程中等待该应用程序刷新. 有人知道避免这种延迟的策略吗? 解决方案 看起来即将到来的流星更新修复了此问题. 我更新到最近的beta: meteor update --release 1.7.1-beta
4 2024-02-27
编程技术问答社区
如何在整个标签栏中均匀间隔标签
我看不到与此相关的任何内容是文档,有人知道如何实现这一目标吗?我注意到Ant Design使用RC-Tabs,因此我查看了他们的文档,但也没有注意到任何内容,以为我看上去还不够努力.任何帮助都将不胜感激. 解决方案 覆盖以下.ant-tabs更少的规则为我解决了此问题: .ant-tabs { &-nav { display: flex; .ant-tabs-tab { flex-grow: 1; margin-right: 0px; width: 100%; text-align: center; } } } 只要标签栏对于每个选项卡及其标题都有足够的宽度,这将均匀地伸出所有选项卡,同时消除每个选项卡之间的空空间. 之前: 之后:
0 2024-02-27
编程技术问答社区
React: 如何从嵌套对象中向状态对象添加一个Ids数组
我有一个带有一些文本框的表单,在另一个组件中,我有一个带有行选择的表. 单击底部的按钮时,我应该发送我已经发送的参数,但在WebAPI中,我应该收到一个带有IDS的列表. 我的主要组成部分是: import React, { Component } from 'react'; import { Input} from 'antd'; import Form from '../../components/uielements/form'; import Button from '../../components/uielements/button'; import Notification from '../../components/notification'; import { adalApiFetch } from '../../adalConfig'; import ListPageTemplatesWithSelection from './ListPag
4 2024-02-27
编程技术问答社区
如何让antd在通过create-react-app创建的应用程序中工作?
我是新手的反应和antd. 我使用Create-React-app启动了一个新的React项目.我安装了antd(ant.design). 我通过添加导入并将其添加到我的渲染中,修改app.js来尝试datepicker: : import React, { Component } from 'react'; import logo from './logo.svg'; import './App.css'; import { DatePicker } from 'antd'; class App extends Component { render() { return (
10 2024-02-27
编程技术问答社区
React Typescript标签的细节onclick没有显示在sun编辑器上
我正在使用我的反应打字条项目进行蚂蚁设计, 这是我的冲突,我想单击标签,其显示为 太阳编辑器内容区域 因此,当我单击标签时显示文本区域,但我不能在太阳编辑器上添加 有什么解决方案吗? 谢谢 代码在这里 import React from 'react'; import ReactDOM from 'react-dom'; import 'antd/dist/antd.css'; import './index.css'; import { Comment, Avatar, Form, Button, List, Input,Tag } from 'antd'; import moment from 'moment'; import 'suneditor/dist/css/suneditor.min.css'; import SunEditor from "suneditor-react"; const { TextArea } = Input; const Comme
0 2024-02-27
编程技术问答社区
在提交时重置Radio.Group的值,点击Antd库。
我正在使用蚂蚁设计库.有useForm()挂钩重置值. 所有值都被重置为原始值,而不是Radio.Group. 如何将单个按钮状态重置为priority从状态重置值? const [priority, setPriority] = useState(2); const [form] = Form.useForm(); const onSubmit = (values) => { console.log('Received values of form: ', values); form.resetFields(); }
8 2024-02-27
编程技术问答社区
在React ant设计中应用类型
我正在使用ANTD Design的表.而且,我想键入onChange函数,该函数以param组件中的参数传递. 中的param. const change = ( pagination: TablePaginationConfig, filters: Record, sorter: SorterResult | SorterResult[] ) => {}; ReactDOM.render( , document.getElementById("container") ); 问题是我不能导入RecordType.如何在不使用any的情况下正确键入此代码?这是一个. 解决方案 您不必明确声明change的类型,SorterResult的仿
2 2024-02-27
编程技术问答社区
无法正常添加行
无法正确添加多行.请按以下步骤: : 单击示例Excel表下载它. 一旦导入了同一张纸,所有数据将显示. 可以通过单击其值并更改它来更新列值. 但是,当我添加更多行时,它出现两次,无法通过单击它来更改其列值. 即使在向其添加行之后.该行没有附加键,如下所示: 添加行之前: 添加行后: Codesandbox link: /github/abiodunsulaiman694/excel-app/tree/master/ 解决方案 而不是索引,如果您的对象数组没有唯一的值(例如ID),则可以使用纳米包装,然后在您的地图函数中执行类似exceLenderer函数的事情: ExcelRenderer(fileObj, (err, resp) => { if (err) { console.log(err); } else { let newRows = []; resp
2 2024-02-27
编程技术问答社区
在离线时使用蚂蚁设计图标
我正在研究使用UI蚂蚁设计的ReactJS应用程序.最近,我们将此应用发布给了计算机非常锁定的生产.该应用程序是Intranet应用程序,这些计算机无法访问Internet.因此,因此,模式上的蚂蚁设计图标显示为空盒子.我做了一些挖掘,发现图标正在使用CSS类. 例如,这是错误模式上的红色错误" x"的CSS类: .anticon-cross-circle:before { content:"\E62E" } 我对CSS内容属性不太熟悉,所以我去了 wwwwww.w3schools. com 并在其有人知道将这些图标导入我的项目需要什么需要做什么,以便它们可以离线使用? 谢谢 解决方案 我认为正在发生的ANT设计正在定义CSS字体定义,并在相应的字体文件中定义了URL.由于计算机是离线的,因此找不到这些定义. 在文档中,我看到它们还提供了SVG图标,该图标应该完全离线工作.我认为这值得一试.可以在此处找到实现此目的的步骤,应从版本3.9.0: h
0 2024-02-27
编程技术问答社区
当我试图删除字符串时,输入被关闭了,而且字符串在Ant Design Vue表上的长度为1。
当我尝试删除输入中的内容,内容的长度为1时,输入关闭,我不知道为什么.我很难弄清楚为什么会发生这种情况. 在此可编辑的表上,我可以编辑所需的所有内容,而当字符串长于1时,这不会发生.我在做什么错? 这是我的代码: {{this.title}}
4 2024-02-27
编程技术问答社区
覆盖ANTD组件的style/className
我正在尝试更新ANTD组件样式. 我正在使用:文档/样式#override-the-component style 作为尝试更新组件样式的参考,但我无法正常工作. 这是我正在尝试的东西: 解决方案 您正在使用示波器样式,这是通过弹出应用程序或安装NPM软件包来实现的,用于加载样式的组件样式.为此,请在您的index.css文件 中粘贴您的. index.css .ant-select-selection { max-height: 51px; overflow: auto; background-color: blue; } .ant-select-selection-search-input { background-color: green; } .ant-select-item-option-content { background-color: orange; } .ant-select-item { position: relativ
0 2024-02-27
编程技术问答社区
this.setState没有更新状态
由于某种原因,我的this.state呼叫没有在我的roleClicked函数中更新状态.我似乎无法弄清楚问题是什么.这是代码: import React, { Component } from 'react' import { Redirect } from 'react-router-dom'; import instance from '../../../config/axios'; import ls from 'local-storage'; import Sidenav from '../../layout/Sidenav' import isLoggedIn from '../../../helpers/isLoggedIn'; import redirectToLogin from '../../../helpers/redirectToLogin'; import apiErrorHandler from '../../../helpers/apiErrorHan
2 2024-02-27
编程技术问答社区
如何使用React测试库更改ANT设计选择选项
我正在使用Ant Design选择使用React测试库AM测试我的组件,我想更改选项选项为教育贷款. this.handleChangeText(e, "loanType")} filterOption={(input, option) => option.children.toLowerCase().indexOf(input.toLowerCase()) >= 0 } > Education Loan Personal/Home Loan 解决方案 您需要触发的事件是Select的第一个孩子的Mousedown(). const elt
16 2024-02-27
编程技术问答社区