Ant Design，一种企业级UI设计语言和基于React的实现。
我试图在禁用时更改选择下拉列表的背景颜色。 我正在测试： .ant-select-disabled .ant-select-selection{background-color: red} 没有运气。 例如，在 r...
我有一个反应组件和一个方便的功能，可以将其打印在蚂蚁设计中和，以便于在表单构建中使用，但无论传递什么......
我有一个相当简单的蚂蚁柱形图，就是这样： 从“反应”导入反应； 从“react-dom”导入ReactDOM； 从“@ant-design/plots”导入{Column}； 常量
为什么在包含 DatePicker 时渲染我的 antd 表单失败？
我有一个组件可以呈现一个简单的表单，如下所示： const { saveButtonProps, formProps, formLoading, queryResult } = useForm(); 返回 （ ... 我有一个组件，可以呈现一个如下所示的简单表单： const { saveButtonProps, formProps, formLoading, queryResult } = useForm(); return ( <Form {...formProps} layout='vertical'> <Form.Item hidden name="id" /> <....blah blah blah, other form items.../> <Row gutter={[32, 32]}> <Col span={8}> <Form.Item name="reportDate" label="Report Date" initialValue={dayjs(formProps?.initialValues?.reportDate)}> <DatePicker placeholder="Report Date" /> </Form.Item> </Col> </Row> </Form> ) 但是，当我导航到该页面时，没有任何内容呈现，并且出现“date4.isValid 不是函数”的错误。查看堆栈跟踪，它被 PickerInput/hooks/useFieldsInvalidate 抛出，最终跟踪到 rc-picker/es/generate/dayjs.js。 我认为 useForm 发现我想在组件内渲染从服务器返回的 JSON 中的“reportDate”值，并立即将其视为 dayjs 类型对象？如果我将 的控件更改为标准输入之类的内容，则页面呈现得很好并包含我期望的数据。 如果我将 DatePicker 组件放在表单之外，并将其初始值设置为 dayjs(formProps?.initialValues?.reportDate)，它也会正确设置日期。那么在对 useForm 的调用中我需要做一些额外的事情来让它将返回值转换为其从一开始就明显期望的格式吗？ 注意：这一切都是使用Refine框架完成的，因此对useForm的调用来自@refinedev/antd。 想通了。 我没有尝试在initialValue 中进行翻译，而是添加了getValueProps={(value) => ({ value: value ? dayjs(value) : "", })}，这样就可以正常工作了。
ant design 中如何调整基于多语言的 Form 项中的搜索字段组件的文字方向？
我想根据用户输入的语言自动调整搜索字段中的文本方向。 例如，如果他正在输入阿拉伯语，请将文本方向切换为 rtl，如果 h...
无法让 Ant Design 与 Vue 3 微前端应用程序配合使用
我正在使用 vite-plugin-federation 使用 Vue 3 创建一个微前端应用程序。有一个公开组件的远程应用程序，还有一个将使用这些组件的主机应用程序。我去过
我将时间选择器格式化为 HH:mm 但在前端输入后，在后端仍将 00:00 作为输入。这是什么问题？
我将时间选择器格式化为 HH:mm 但在前端输入后，在后端仍将 00:00 作为输入。 我希望它从前端获取正确的输入并将其存储到
如何在 ant design 中使用 React js 将按钮用作复选框
我用react JS在ant-design中创建了一个复选框组。现在，我想使用按钮，而不是那里的复选框。每个值一个按钮。 这是我的代码。 我在 ant-design 中使用 React JS 创建了一个复选框组。现在，我想使用按钮，而不是那里的复选框。每个值一个按钮。 这是我的代码。 <Checkbox.Group> <ul className="ul-custom"> {this.props.symptomsForCheckbox.map((symptom) => { return ( <li> <Checkbox value={symptom.id}> symptom.nameEnglish </Checkbox> </li> ); })} </ul> </Checkbox.Group> 这里看起来像 我想要的是添加按钮，而不是复选框。下图显示了这一点。 我使用的代码是， <Checkbox.Group> <ul className="ul-custom"> {this.props.symptomsForCheckbox.map((symptom) => { return ( <li> <Button value={symptom.id}> symptom.nameEnglish </Button> </li> ); })} </ul> </Checkbox.Group> 但这不能用作复选框。有解决这个问题的想法吗？ 提前致谢 这是我的创作。 您可以仅勾选一项或取消勾选全部。 我提供了简单的 CSS，看起来像 Radio.Button。 https://stackblitz.com/edit/react-bsyhkm?file=index.js 我根据需要创建了具有垂直和宽度选项的新版本。 https://stackblitz.com/edit/react-bsyhkm-n7umzv?file=styled.js 不确定您是否仍在搜索，但我遇到了同样的问题，并在沙箱上找到了一个非常好的示例这里。 它实际上并没有使用任何 antd 库，但我认为它看起来非常相似，并且稍微调整一下以使其与 UI 的其余部分保持一致应该非常简单。 您可以使用 CheckableTags 而不是 checkBox 来获得此行为。 检查这个例子 你解决了吗？这是我的代码，但无法正常工作 <Checkbox.Group value={checkedValues} onChange={(values) => onChange(index, values)} > {permissions.map((option: any, indexOther: any) => ( <Tooltip placement="topLeft" title="ini adalah adalah" color={"gold"} key={indexOther} > <Checkbox key={`${indexOther}`} value={option.value} className="z-10" > <Button type="dashed" className="z-0" onClick={() => onChange(index, option.value)} // not properly on unchecked for checked value and also replace all index value , should only change on onChange like checkgroup function > {option.label} </Button> </Checkbox> </Tooltip> ))} </Checkbox.Group> 这里功能 const onChange = (index: number, list: CheckboxValueType[]) => { setCheckedLists((prevLists) => { const newLists = [...prevLists]; newLists[index] = list; return newLists; }); }; const onCheckAllChange = ( index: number, checkedValues: CheckboxValueType[], ) => { const allPermissions = data[index].permission.map( (perm: any) => perm.value, ); onChange( index, checkedValues.length === allPermissions.length ? [] : allPermissions, ); }; 也许你可以尝试， 在按钮单击事件上更改状态（state = !initialstate）（即反转初始状态），将初始状态设置为 false。然后根据按钮的状态设置复选框的值。
从“react”导入React； 导入“./App.css”； 从“react-router-dom”导入 { BrowserRouter as Router, Routes, Route, Link }; 从“./CreateE...
我在antd.customize.less文件中有以下配置： @btn-primary-bg：#ffe900； @btn-primary-color：@primary-color； @btn-默认颜色：@primary-color； @btn-default-bg：#ffffff； 开
React.js + antd Grid：“列表中的每个子项都应该有一个唯一的“key”属性”错误
我必须使用 Ant Design Grid 从数组内容动态渲染网格，我使用 _.map 方法来执行此操作，这会导致以下警告显示为错误消息： 警告...
我使用 ant-table-extensions 来显示 table 中的数据。但我遇到了一些问题，比如 antd 自动导入一些 css，它扰乱了我的设计。怎么才能去掉呢。就连我也...
我在我的项目中准备了一个登录页面。通常，我用 bootstrap 编辑它并且它可以工作。 但是当我用ant desing编辑并保存时，它给出了错误。这是错误消息： “元素……
我尝试在 Antd 表上创建一个搜索栏和一个过滤器类型，但这两个过滤器不想一起工作。 这是我的沙箱 我的问题是当我取消注释filteredValue时，我的setFilteredType(va...
我正在使用 ant design 的通知组件，我想从通知框中删除关闭（X）按钮。 我尝试添加 closeable: false 和 icon: null 但不起作用 通知.信息(...
模态框打开后如何聚焦到输入？我无法使用 useRef 因为它不是一个组件并且 autoFocus 不起作用，可能是因为我必须单击按钮才能打开此模式 导出常量
我正在尝试使用 [email protected] 创建一个自动滚动的下拉菜单。 我想让下拉列表在每次鼠标悬停时始终滚动到末尾。 这是我想要的一个例子...
我的项目中有一个antd表 antd 版本：4.25.15 反应：“^16.8.6” 它看起来像这样： 我的项目中有一个 antd 表 antd 版本：4.25.15 反应：“^16.8.6” 看起来像这样： <Table dataSource={data} columns={columnsForRender} expandable={expandable} /> 可扩展道具： const expandable = { expandIcon: ({ expanded, onExpand, record }) => { if (!record.children) { return null; } return expanded ? ( <MinusOutlined className='ant-table-row-expand-icon' onClick={e => onExpand(record, e)} /> ) : ( <PlusOutlined className='ant-table-row-expand-icon' onClick={e => onExpand(record, e)} /> ); }, }; 但是这个按钮看起来不太标准。 我想使用表中的标准按钮 例子： 第一张照片 - 我的按钮 第二张照片 - 标准 antd 按钮 我不能使用这个 ExpandedRowRender 和 rowExpandable 因为这样会创建一个新列 我尝试使用不同的类，但不能使用展开和折叠的类 （也许我不知道怎么做） const expandable = { expandIcon: ({ expanded, onExpand, record }) => { if (!record.children) { return null; } const iconClassName = `ant-table-row-expand-icon ant-table-row-expand-icon-${ expanded ? "expanded" : "collapsed" }`; return ( <span className={iconClassName} onClick={(e) => onExpand(record, e)} /> ); }, }; 这对我有帮助:)
想知道是否有一种方法可以根据每个选项卡的嵌套路由来渲染路由。 例如，当我们浏览到 http://localhost:3000/base/a http://localhost:3000/base/b 我们期望...