antd 相关问题

我创建了一个小小提琴来说明这个问题：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

回答 3 投票 0

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

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

reactjs material-ui antd

回答 1 投票 0

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 的组件

reactjs antd

回答 0 投票 0

两个 Antd 表单，一个组件

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

reactjs antd

回答 2 投票 0

如何在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>

javascript reactjs antd

回答 3 投票 0

无法修复 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'}}}

css reactjs antd

回答 2 投票 0

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

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

reactjs antd

回答 1 投票 0

如何将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。不要忘记删除当前的样式。

javascript reactjs antd

回答 1 投票 0

antd 相关问题

最新问题