antd 相关问题

为什么 Ant Design 子行按钮会添加到我的表格中？

我正在使用 antd "antd": "^3.26.3" 来开发一个应用程序，现在表格中有一个 + ，如下所示： 我没有添加任何设置来添加+，为什么+出来了？我该怎么做才能删除...

为什么antd表格自动添加`+`，如何去掉`+`

我正在使用 antd "antd": "^3.26.3" 来开发一个应用程序，现在表格中有一个 + ，如下所示： 我没有添加任何设置来添加+，为什么+出来了？我该怎么做才能删除...

React AntD 选择样式滚动条

我正在尝试访问 antD Select 组件中的滚动条样式。我已经找到了滚动条样式的位置，但它不起作用。意思是，当我删除显示时它会显示：无...

antd Form.Item 只接受一个孩子

我创建了一个小小提琴来说明这个问题：https://stackblitz.com/edit/react-avejvc-mmhqda?file=index.js 该表格的工作原理： < 我创建了一个小小提琴来说明这个问题：https://stackblitz.com/edit/react-avejvc-mmhqda?file=index.js 此表格有效： <Form initialValues={{ surname: 'Mouse'}}> <Form.Item name="surname"> <Input /> </Form.Item> </Form> 此表格不： <Form initialValues={{ surname: 'Mouse'}}> <Form.Item name="surname"> <Input /> {null} </Form.Item> </Form> 唯一的区别是第二种形式中的Form.Item有两个孩子。 这背后有什么意图吗？ 如果有人想知道我为什么问。所以像这样的东西破坏了形式： <Form.Item name={name}> {type==="string" && <Input />} {type==="integer" && <InputNumber />} </Form.Item> 官方文档here给出了在一个Form.Item中使用多个子元素的示例。 <Form.Item label="Field"> <Form.Item name="field" noStyle><Input /></Form.Item> // that will bind input <span>description</span> </Form.Item> 您在 Form.Item 中放入的内容似乎有问题，即。 {null} 可能不允许。 我找到了解决方案，现在对发生的事情有了更好的了解。 来自文档（https://ant.design/components/form/#Form.Item）： 被Form.Item用name属性包裹后，value（或valuePropName定义的其他属性）onChange（或trigger定义的其他属性）props将被添加到表单控件中，表单数据的流向将由Form处理 文档中也有一个工作示例，这里是 codepen：https://codepen.io/pen?&editors=001 const { useState } = React;; const { Form, Input, Select, Button } = antd; const { Option } = Select; const PriceInput = ({ value = {}, onChange }) => { const [number, setNumber] = useState(0); const [currency, setCurrency] = useState('rmb'); const triggerChange = (changedValue) => { onChange?.({ number, currency, ...value, ...changedValue, }); }; const onNumberChange = (e) => { const newNumber = parseInt(e.target.value || '0', 10); if (Number.isNaN(number)) { return; } if (!('number' in value)) { setNumber(newNumber); } triggerChange({ number: newNumber, }); }; const onCurrencyChange = (newCurrency) => { if (!('currency' in value)) { setCurrency(newCurrency); } triggerChange({ currency: newCurrency, }); }; return ( <span> <Input type="text" value={value.number || number} onChange={onNumberChange} style={{ width: 100, }} /> <Select value={value.currency || currency} style={{ width: 80, margin: '0 8px', }} onChange={onCurrencyChange} > <Option value="rmb">RMB</Option> <Option value="dollar">Dollar</Option> </Select> </span> ); }; const Demo = () => { const onFinish = (values) => { console.log('Received values from form: ', values); }; const checkPrice = (_, value) => { if (value.number > 0) { return Promise.resolve(); } return Promise.reject(new Error('Price must be greater than zero!')); }; return ( <Form name="customized_form_controls" layout="inline" onFinish={onFinish} initialValues={{ price: { number: 0, currency: 'rmb', }, }} > <Form.Item name="price" label="Price" rules={[ { validator: checkPrice, }, ]} > <PriceInput /> </Form.Item> <Form.Item> <Button type="primary" htmlType="submit"> Submit </Button> </Form.Item> </Form> ); }; ReactDOM.render(<Demo />, mountNode); 将元素包裹在 <Input.Group> 内可以很好地适应上述场景。检查下面的代码 <Form.Item label="Role"> <Input.Group compact> {error?.type === "getRulesError" && ( <Alert message="Error fetching roles" type="error" showIcon /> )} {!error?.type && rolesLoading && <Loading />} {!error?.type && !rolesLoading && ( <Form.Item name="role" rules={[ { required: true, message: "Please select user role" } ]} noStyle > <Select placeholder="Select user role" style={{ width: "100%" }} > {roles?.map(each => ( <Option value={each.roleName} key={each.roleId}> {each?.roleName} </Option> ))} </Select> </Form.Item> )} </Input.Group> </Form.Item>

antd 时间选择器组件从右到左

我的html是dir =“rtl” 这使得 antd 的 TimePicker 组件无法正常运行 它不是左边是小时，右边是分钟，而是相反的。 正如你所看到的分钟...

Antdesign Select z-index 与 Portal 的问题

我有这样的事情： 选择选项是在 旁边的 div 中创建的 我有这样的东西： <Portal> <BigComponent> <Select options={[...]} /> </BigComponent> </Portal> 选择选项是在 BigComponent 旁边的 div 中创建的。 BigComponent div 绝对定位于高 z-index。 这使得它覆盖了下拉菜单的选项。我可以在开发工具中通过给出相对于 Antd 创建的 div 的位置并给它一个高 z-index 来修复它，但问题是它没有选择器，所以无法定位它。 有什么解决办法吗？ 找到了！有一个 prop getPopupContainer 接受一个返回选择器的函数，我刚刚选择了我的 BigComponent div，现在它工作正常:) document.getElementById('大组件') || document.body} // 回退到 document.body /> 获取PopupContainer。 是 antd select 中的 prop 来决定我们必须在其上显示 popUpContainer 的组件

两个 Antd 表单，一个组件

我在一个组件中有两个 antd 表单。第一个表单是一个注册表单，用户在其中输入各种信息（名字、姓氏、电子邮件等）。提交按钮会触发一个功能

如何在antd表单中使用Switch输入法？

我正在使用 Antd "version": "4.16.6"，并且我们的其中一种表单中有 Switch 字段： 我正在使用 Antd "version": "4.16.6",，我们的其中一种表单中有 Switch 字段： <Form ref={registerForm} initialValues={{ hasArchive: true }}> <Form.Item name="hasArchive" label="Has Archive?" valuePropName="checked"> <Switch defaultChecked /> </Form.Item> </Form> 但是 Switch 不会改变 hasArchive 值。 这两个组件对我有用。 import React, { useState } from "react"; import { Form, Switch } from 'antd'; const Example1 = () => { const [isChecked, setIsChecked] = useState(false); const onFinish = (value) => { console.log(value) } return <Form name='example-form' onFinish={onFinish} initialValues={{ isChecked }} > <Form.Item name='isChecked' valuePropName='checked' > <Switch onChange={setIsChecked} /> </Form.Item> </Form>; }; const Example2 = () => { const onFinish = (value) => { console.log(value) } return <Form name='example-form' onFinish={onFinish} initialValues={{ isChecked: true }} > <Form.Item name='isChecked' valuePropName='checked' > <Switch /> </Form.Item> </Form>; }; 使用 onChange 属性来监听开关切换。 import { Switch } from 'antd'; function handleSwitchToggle(checked) { console.log(`switch to ${checked}`); } ReactDOM.render(<Switch defaultChecked onChange={handleSwitchToggle} />, mountNode); 参考：https://ant.design/components/switch/ 要更新表单值，请使用以下代码，只需将 initialValue 属性放入 Form.item <Form.Item name="switch" label="Switch" valuePropName="checked" initialValue > <Switch checkedChildren="YES" unCheckedChildren="NO" /> </Form.Item> 您可以使用 antd switch 示例测试此 Playground 中的代码 https://codesandbox.io/s/xiao-yan-qi-ta-zu-jian-antd-4-17-0-alpha-7-forked- 00zvbr？文件=/index.js:518-691 <Form.Item name="hasArchive" label="Has Archive?" valuePropName={ hasArchive ? 'checked' : 'unchecked' }> <Switch /> // remove defaultChecked </Form.Item>

无法修复 Antd 模态高度

我尝试将 Antd Modal 高度默认设置为 1000px，但它没有被应用。请建议我可能做错的地方。下面是我的模态代码。 我正在尝试将 Antd Modal 高度默认设置为 1000px ，但它未得到应用。请建议我可能做错的地方。下面是我的模态代码。 <Modal style={{ height: "1000px" }} className="pm" width={600} title="Select" visible={isModalVisible3} footer={null} onCancel={() =>setIsModalVisible3(false)}> <span>Sample Text</span> </Modal> 我什至在我的 base.css 文件中添加了 .pm{height: 1000px;} 但没有运气 请提出解决方法。 试试这个方法 <Modal bodyStyle={{height: 1000}} > Your content </Modal> 如果几年后有人发现自己出现'bodyStyle' is deprecated错误，上述答案的当前语法是 styles={{body: {height: '1000px'}}}

为什么我的图表会绘制额外的 x 轴宽度？

我在项目中使用 antd Charts 来绘制时间序列数据。我的数据仅在晚上 18:30 之前有数据点，但 antd 折线图绘制了额外的 x 轴宽度，这使得数据看起来像是丢失了。 那个...

如何将antd FloatButton.Group放置在右上角位置？

我使用以下代码将浮动按钮组放置到右上角位置。我用 style 属性控制它并且它起作用了： 我使用以下代码将浮动按钮组放置到右上角位置。我用 style 道具控制它，它起作用了： <FloatButton.Group trigger="click" type="primary" shape="square" style={{ right: 84, top: 24, }} icon={<GlobalOutlined style={{ color: colors.red }} />} closeIcon={<CloseOutlined style={{ color: colors.red }} />} > <FloatButton tooltip={<div>English</div>} description={"🇺🇸"} onClick={() => { setLanguage("english"); }} /> <FloatButton tooltip={<div>French</div>} description={"fr"} onClick={() => { setLanguage("french"); }} /> </FloatButton.Group>; 我用控制了它 style={{ right: 84, top: 24, }} 但是，库中发生了一些变化，此代码不再起作用。例如，我看到他们现在使用style={{ insetInlineEnd: 24 }}，但它仅用于水平放置，我不知道如何像以前那样将它们放置在右上角。 谢谢！ 在你的style里面你可以尝试添加： insetInlineEnd: 24 insetBlockStart: 24 您也可以将您的位置更改为fixed。 不要忘记删除当前的样式。

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 个系列？ 例如 将绘制一条系列线