antd 相关问题

antd v4 - 步骤和表单

我是 React 新手，正在尝试 ant design。我需要构建一个多步骤表单，其中每个步骤都有几个字段，最后一步将有一个提交按钮。这将使用 useF...

React antd 多选滚动条

我有一个antd select组件，如下所示： 我有一个antd select组件，如下图： <Select mode="multiple" className='select-input width-220px custom-multiselect' value={this.state.selectedColumns} onChange={this.handleAdditionalColumnsChange} optionLabelProp="label" maxTagCount={2} maxTagPlaceholder={(omittedValues) => `+${omittedValues.length} more`} showArrow={true} dropdownRender={(menu) => ( <div> <div className='flex-row justify-space-between padding-4px'> <button onMouseDown={e => e.preventDefault()} type='button' className='clear-selection-button' onClick={() => this.handleClearSelected()}>Clear Selected</button> <button onMouseDown={e => e.preventDefault()} type='button' className='dropdown-button button-bg-color-blue' onClick={() => this.handleSave}>Save</button> <button onMouseDown={e => e.preventDefault()} type='button' className='dropdown-button button-bg-color-white'>Apply</button> </div> {menu} </div> )} > {this.props.additionalColumns.map((column) => ( <Select.Option key={column.columnName} value={column.columnName} label={column.displayname}> <Checkbox checked={column.isMandatory === 'Y' || this.state.selectedColumns.includes(column.columnName)} disabled={column.isMandatory === 'Y'} onChange={(e) => { this.handleCheckboxChange(column.columnName, e.target.checked); this.handleCheckboxChangeForUuid(column.columnUuid, e.target.checked); }} > {column.displayname} </Checkbox> </Select.Option> ))} </Select> 选择多个项目后，项目溢出到选择组件的边界之外。 为了纠正我添加了滚动选项： .custom-multiselect .ant-select-selector { max-height: 60px; overflow-y: auto; } 但是好像不起作用。 我想在选择组件中添加一个滚动选项以显示所有选定的项目。 您尝试的方法是正确的，但只需覆盖类 .ant-select-selection--multiple 即可，如下所示： .ant-select-selection--multiple { max-height: 60px; overflow-y: auto; } 这应该有效

如何使用 Antd 让我的网站尊重用户的深色模式设置？

我了解如何以编程方式更改我的网站主题或使用 Antd 和 React 的状态，但如何尊重暗模式的用户设置，而无需重新加载网站...

Ant Design：将“位置”子菜单移动到屏幕顶部

可以将子菜单位置移动到屏幕顶部。我正在使用新的菜单组件。哪种方式声明就是使用它，你所要做的就是写 可以将子菜单位置移动到屏幕顶部。我正在使用新的菜单组件。哪种方式声明就是使用它，你所要做的就是写<Menu mode= {mode} theme={theme} items={items}/>。 默认子菜单位置： 这是我的预期条件： 蓝线是菜单，红线是子菜单。我之前所做的方法是创建一个新菜单并将其放置在屏幕顶部 但我觉得如果这样使用的话会很麻烦。所以我想通过将子菜单移动到屏幕顶部来切换方式。这真的可以做到吗？ 您始终可以覆盖 ant design css 样式来实现此目的。子菜单项是常见的 ul 和 li 对。要在一行中显示 li 项，我们只需要 - ul li{ display: inline; } 我们可以将相同的方法应用于 ant design 菜单项并进行一些调整 - .ant-menu-vertical.ant-menu-sub > .ant-menu-item { display: inline; } .ant-menu-submenu-popup { top: 0px !important; right: 5% !important; left: auto !important; width: 400px; } 输出 “popupOffset”更新相应项目的项目数组中的此参数键以设置其弹出偏移量

如何让加载图标与antd表格的文字和按钮居中

从“react”导入React； 从'antd'导入{按钮}； 导出 const getLoadingCondition = ({ isLoading, showSpinnerText, onClearFilters }: LoadingConditionProps) => ({ 延迟：500， 旋转...

如何在 antd 菜单项的右侧添加按钮

我想用 antd 在 React 中创建一个 Sider。我动态地用物品填充 sider。因此我有函数 getItem() 来创建一个项目。现在我想在

如何防止antd rangepicker组件中的时间选择自动交换？

这是antd的Rangepicker（取自https://ant.design/components/date-picker），放在antd的Form Item组件中。 这是antd的Rangepicker（取自https://ant.design/components/date-picker），放在antd的Form Item组件中。 <Form.Item name={name} label="Start/End Datetime" style={{ marginBottom: 15 }} rules={[ { required: required, message: "This is a mandatory field", }, { validator: (_, value) => customValidator(value) }, ]} > <RangePicker style={{ width: '100%' }} format={'YYYY-MM-DD HH:mm'} showTime={{ format: 'HH:mm' }} onCalendarChange={(dates) => { setStartDate(dates?.[0]); setEndDate(dates?.[1]); }} disabledDate={disabledDate} disabledTime={disabledRangeTime} /> </Form.Item> const disabledRangeTime = (_, type) => { if (type === 'start') { return { disabledHours: () => endDate ? range(0, 24).splice(moment(startDate).add(1, 'hour').hours(), 24) : null, disabledMinutes: () => { if (endDate && moment().isSame(endDate, 'day')) return range(0, 60).splice( moment(startDate).add(1, 'minute').minutes(), 60, ); else return null; }, }; } return { disabledHours: () => startDate ? range(0, 24).splice(0, moment(startDate).hour()) : null, disabledMinutes: () => { if (startDate && moment().isSame(startDate, 'day')) return range(0, 60).splice(0, moment(startDate).minutes()); else return null; }, };}; const disabledDate = (current) => { return current && current < moment().startOf('day'); }; const range = (start, end) => { const result = []; for (let i = start; i < end; i++) { result.push(i); } return result;}; 假设我输入 3/16 10:00 作为开始日期，3/16 3:00 作为结束日期，单击“确定”会自动交换时间，这可能会被忽视，并且用户体验很差。 我发现 Timepicker 文档中提到了一个名为“order”的 prop（https://ant.design/components/time-picker），但将 prop 设置为 false 似乎没有任何作用。 有没有办法停止自动交换并抛出验证错误？ 您可以使用 order 的 RangePicker 属性。它接受 Boolean。将其设置为 false 将阻止 RangePicker 交换所选时间。

react-text-mask 和输入 ant.design

掩码输入不适用于 antd 的输入。 也许裁判需要以不同的方式转移。 导出 const MaskedInput = () => ( 掩码输入不适用于 antd 的输入。 也许需要以不同的方式转移参考。 export const MaskedInput = () => ( <TextMask mask={[/\d/, /\d/, /\d/, /\d/, /\d/, /\d/]} render={(textMaskRef, props) => ( <Input {...props} ref={(inputRef) => { inputRef && textMaskRef(inputRef?.input); }} /> )} placeholder={"4 numbers"} /> ); 代码沙箱 我尝试过这样传输ref，但是没有效果 export const MaskedInput = React.memo(React.forwardRef((props, ref) => ( <TextMask mask={[/\d/, /\d/, /\d/, /\d/, /\d/, /\d/]} render={(textMaskRef, props) => ( <Input {...props} ref={(inputRef) => { if (inputRef?.input) { textMaskRef(inputRef?.input); if (ref) { ref.current = inputRef?.input; } } }} /> )} /> ))); 根据我的研究，蚂蚁输入似乎有问题ref所以你可能无法使用它 而是使用文本掩码中名为 conformToMask 的实用程序，如下所示 import React, { useState } from "react"; import TextMask, { conformToMask } from "react-text-mask"; import { Input } from "antd"; var fourDigitsMask = [/\d/, /\d/, /\d/, /\d/]; export const MaskedInput = () => { const [value, setValue] = useState(); const [maskedValue, setMaskedValue] = useState(); const handleChange = (e) => { setValue(e.target.value); setMaskedValue( conformToMask(e.target.value, fourDigitsMask, { guide: false }) .conformedValue ); }; return <Input value={maskedValue} onChange={handleChange} />; }; codesandbox：https://codesandbox.io/p/sandbox/text-mast-input-antd-forked-76qylt?file=%2Fsrc%2FMaskInput.jsx%3A1%2C1-21%2C1

Antd 在 x 轴上绘制 2 条线，并且在同一个图表中具有不同的间隔值？

是否可以在 Antd 中从 ('@ant-design/plots') 生成折线图，在同一张图中以 X 轴上的两个不同时间间隔绘制 2 个系列？ 例如 将绘制一条系列线

如何更改单位（antd/图表）

我通过ant Design使用Liquid图表 我只得到“%”作为值，有人知道如何更改它吗？ 我尝试过的事情 我在蚂蚁官网进行了测试并应用了

如何仅在使用 ant design 5.14.2 激活省略号时显示工具提示？

如果我压缩屏幕 - 那么一切都很好，并且仅当有省略号时才会显示工具提示，但是如果我将屏幕解压缩 - 省略号不会消失并且文本仍然存在

无法在水平滚动中滚动到左边缘末尾 - css

我在React中添加了一个水平滚动，使用css，我想水平显示卡片列表，但我无法完全滚动到左边缘。我在下面附上了 SS，我已经标记了

如何在React中使<div>元素可拖动/可调整大小以实现antd表中可调整大小的列？

我正在使用 React antd 库来显示我的表格内容。我想添加一个功能来调整列宽。因此，我将该列包装在 my 中，如下所示。拖动工作正常，如expe...

ant design React Flexbox 不使用全宽

我在react中使用antd表单，但我的输入没有使用全角 我在react中使用antd表单，但我的输入没有使用全角 <div className='loginForm'> <Form className='form' name="basic" labelCol={{ span: 8, }} wrapperCol={{ span: 16, }} style={{ maxWidth: 600, }} initialValues={{ remember: true, }} onFinish={onFinish} onFinishFailed={onFinishFailed} autoComplete="off"> <Form.Item name="email" rules={[ { required: true, message: 'Please input your email!', }, ]} > <Input placeholder='Email' /> </Form.Item> <Form.Item name="password" rules={[ { required: true, message: 'Please input your password!', }, ]} > <Input.Password placeholder='Password' /> </Form.Item> </div> 为什么它没有延伸到全宽？ 我知道这可能真的很简单，但我无法解决，我哪里出错了？ 从 style={{ maxWidth: 600 }} 组件中删除 <Form/> 即可工作。 例如 import React from 'react'; import './index.css'; import { Form, Input } from 'antd'; const App: React.FC = () => ( <Form labelCol={{ span: 8 }} wrapperCol={{ span: 16 }}> <Form.Item label="Email" name="email" rules={[ { required: true, message: 'Please input your email!', }, ]} > <Input placeholder="Email" /> </Form.Item> <Form.Item label="Password" name="password" rules={[ { required: true, message: 'Please input your password!', }, ]} > <Input.Password placeholder="Password" /> </Form.Item> </Form> ); export default App; 输出： 堆栈闪电战

选择标签模式下选择的标签和输入的标签之间的差异

我正在使用 ，需要一种方法来找出框中添加了哪些新标签。 作为示例，我使用来自...的选项值 1,2,3,4 初始化 Select 我正在使用 <Select mode="tags" />，需要一种方法来找出框中添加了哪些新标签。 作为示例，我使用来自 api 的选项值 1、2、3、4 初始化 Select。 我现在通过单击选项“2”将其添加为标签，并通过写入将“5”添加为新值。 如何识别这5个值是新添加的？ 只需检查用户输入的标签是否在从 API 获取的标签中。 import React, { useEffect, useState } from 'react'; import './index.css'; import { Select } from 'antd'; import type { SelectProps } from 'antd'; const optionsFromAPI = async () => { const options: SelectProps['options'] = []; for (let i = 1; i < 5; i++) { options.push({ value: i.toString(), label: i.toString(), }); } return options; }; const App: React.FC = () => { const [options, setOptions] = useState([]); useEffect(() => { optionsFromAPI().then((res) => { setOptions(res); }); }, []); const handleChange = (value: string[]) => { const newTags = []; value.forEach((tag) => { if (options.findIndex((o) => o.value === tag) === -1) { newTags.push(tag); } }); console.log('newTags:', newTags); }; return ( <Select mode="tags" style={{ width: '100%' }} placeholder="Tags Mode" onChange={handleChange} options={options} /> ); }; export default App; 输出 日志： 堆栈闪电战

ant.design datepicker 自定义输入组件

我尝试使用掩码将输入添加到数据选择器中。但我遇到了一个问题。无法使用此方法输入值，或者在聚焦时调用日历本身 导入 { DatePi...

ant.design 日期选择器自定义输入掩码

我尝试使用掩码将输入添加到数据选择器中。但我遇到了一个问题。无法使用此方法输入值，或者在聚焦时调用日历本身 导入 { DatePi...

Antd 日期选择器意外行为

我使用 Antd 和 React。在我的模式中，我设置包括日期选择器在内的字段值。到目前为止一切正常。当我尝试选择新日期时，日期选择器会呈现带有蓝色背景的奇怪日期。同时

react-signature-canvas 在 ant design Modal 中不起作用

当我将 SignaturePad 放入 ant design 组件库“Modal”组件时，我遇到一个问题，它无法生成 Base64 图像。 当代码到达修剪功能时...

测试 Table 组件 Ant-Design

我正在尝试测试 ant-design Table 组件，但我遇到了一个谜。目前，我的测试正在运行；我可以在文档中找到名字“Mike”。但是，一旦我取消注释