在antd 4中将初始值设置为动态形式
在antd 4中，可以通过使用动态形式来设置初始值。具体步骤如下：
- 首先，确保你已经安装了antd 4的版本。你可以通过以下命令来安装最新版本的antd：
npm install antd@4 --save- 在你的代码中引入antd的相关组件和样式：
import { Form, Input } from 'antd';
import 'antd/dist/antd.css';- 创建一个表单，并设置初始值为动态形式。你可以使用
Form组件的initialValues属性来设置初始值。这个属性接受一个对象，对象的键是表单字段的名称，值是对应字段的初始值。例如：
const initialValues = {
username: 'admin',
password: '123456',
};
<Form initialValues={initialValues}>
<Form.Item label="Username" name="username">
<Input />
</Form.Item>
<Form.Item label="Password" name="password">
<Input.Password />
</Form.Item>
</Form>在上面的例子中，表单的初始值被设置为username字段的值为'admin'，password字段的值为'123456'。
- 如果你想要动态地改变初始值，可以使用
setFieldsValue方法。这个方法接受一个对象，对象的键是表单字段的名称，值是对应字段的新值。例如：
const [form] = Form.useForm();
const handleButtonClick = () => {
form.setFieldsValue({
username: 'newadmin',
password: 'newpassword',
});
};
<Form form={form} initialValues={initialValues}>
<Form.Item label="Username" name="username">
<Input />
</Form.Item>
<Form.Item label="Password" name="password">
<Input.Password />
</Form.Item>
<Button onClick={handleButtonClick}>Change Initial Values</Button>
</Form>在上面的例子中，点击按钮后，表单的初始值会被动态地改变为username字段的值为'newadmin'，password字段的值为'newpassword'。
这样，你就可以在antd 4中将初始值设置为动态形式了。
关于antd的更多信息和使用方法，你可以参考腾讯云的Ant Design Pro产品，它是一个开箱即用的中台前端/设计解决方案，提供了丰富的组件和模板，可以帮助你快速构建企业级应用。
Ant Design Pro产品介绍链接地址：https://cloud.tencent.com/product/adcpro
相关·内容
我正在为这个项目使用ANTD ()，ANTD与其他组件一起工作得很好，而我在使用DatePicker()时遇到了问题。DatePicker使用moment()
在最初的表单中，我希望所有字段都有一个占位符，一旦用户填写了表单，它将显示给他/她。一旦添加，用户就可以编辑他们的数据。
设置数据很好，但我无法将日期字段初始设置为空，以便能够向用户显示带有占位符的字段
我将日期字段设置为
initialValue: moment(null) => invalid date
initialValue: moment('') => invalid date
initialVal
浏览 76提问于2019-07-27得票数 0
正如标题所述。这两者有什么区别呢？
1.
import { Form } from 'antd';
const Components = () => {
const [form] = Form.useForm();
form.setFieldsValue({ ... });
return (
<Form form={form}>
...
</Form>
);
}
import { Form } from 'antd';
const Components = () => {
浏览 4提问于2022-05-12得票数 0
回答已采纳
最近，我将一个工作的JavaScript/React项目迁移到了类型记录。在任何地方，在React组件中，我使用的都是antd组件，代码不能进行类型检查。我有以下几件事：
import { Radio, Button } from 'antd';
...
<Radio.Group ...>
<Radio.Button ...>a button</Radio.Button>
</Radio.Group>
..。我得到的类型错误如下：
TS2339: Property 'Group' does no
浏览 0提问于2020-07-01得票数 0
回答已采纳
1回答
我已经在我的react项目中实现了antd，有一件事我无法在我的生命中找到。我有一个有3列的行，当屏幕大小缩小时，我想将3列折叠成一列。
每当我调整屏幕大小时，它们一次只折叠一个，而不是一次一次。我能够使用flex在vanilla /css中实现这一点，但由于某些原因，我无法获得与antd相同的效果。我尝试过添加媒体查询，但没有运气。
这是它开始崩溃时的样子，我还附上了我的代码以供参考。可能是列上的flex设置设置不正确吗？
React示例：
CSS
@import 'antd/dist/antd.css';
.Red {background: red; colo
浏览 3提问于2020-09-22得票数 6
回答已采纳
我在我的项目中使用了蚂蚁设计。我使用useEffect从redux store获取数据，如下所示； const settingsRedux = useSelector(state => state.SETTINGS) 之后，我使用此数据作为输入的defaultValue <Input
defaultValue={settingsRedux.background_image}
onChange={e => dispatch({
type: BACKGROUND_IMAGE,
payload: e.target.value
})}
/>
浏览 606提问于2020-04-16得票数 3
在使用antd表单组件(依赖于rc-form)创建表单之后，我也需要使用编辑表单，我找不到任何关于如何用我拥有的表单值(特别是动态字段)初始化antd表单的资源。
我发现使用form.setFieldsInitialValue(theEditValues);将正确地使用数据初始化一些表单字段(例如，带有多个select的下拉列表)，而不是普通的下拉列表&最重要的是，所有动态字段都没有创建，这就警告您在创建字段之前不能设置字段数据。
那么，是否有一种首选的方法来处理编辑场景？因此：
1-根据之前提交的数据重新创建动态字段
2-将整个表单与提交的数据同步
我已经添加了，主要是如果我有表单值
浏览 1提问于2020-02-18得票数 0
2回答
下面是我收到的错误： Uncaught Error: Module parse failed: Unexpected token (15:5)
You may need an appropriate loader to handle this file type.
| /* stylelint-disable at-rule-no-unknown */
| html,
> body {
| width: 100%;
| height: 100%;
at eval (antd.css:1)
at Object../node_modules/antd/dis
浏览 15提问于2019-03-08得票数 2
回答已采纳
我将Antd分页的pageSize更改为15，发现pageSize内容只显示"15"，而不是“15/页”。
但是页面选择选项是“10/ pageSize”、"20/page“、"30/page"……，而且我不能使用pageSizeOptions接口来修复它，因为我的pageSize是一个动态数字。
有没有人遇到这个问题？请给我一些建议。
Antd版本3.12.1
浏览 75提问于2020-02-14得票数 0
1回答
我动态地创建一个radiobuton的集合。
<ItemsControl.ItemTemplate>
<DataTemplate>
<RadioButton GroupName="CurrentParameter"
IsChecked="{Binding IsSelected, Mode=TwoWay}"
Content="{Binding Name, Mode=OneWay}"/>
</D
浏览 1提问于2017-05-17得票数 0
回答已采纳
我在antd中实现了一个Datepicker，但我想让输入栏显示占位符，但它却显示了初始状态值，这里是代码 <DatePicker
value={dateOfBirth}
placeholder="Date of Birth"
format={dateFormat}
onChange={(date) => setDateOfBirth(date)} /> 现在，我希望占位符是可见的，同时我希望datepicker组件是一个受控的componenent.But，我不能使占位符可见，除非我删除v
浏览 20提问于2021-03-23得票数 0
回答已采纳
`}} > <FormItem name="name" label="ชื่อ" onChange={this.handleChange} rules={[{ required: true, message: "โปรดระบุชื่อ ", }]} >
浏览 2提问于2020-08-26得票数 0
回答已采纳
8回答
关于在CRA中集成Ant设计库，我有一个问题(创建-反应-应用程序)。
在我尝试将其集成到他们的中之后，如果没有Craco的集成，我总是会收到以下4条警告：
WARNING in ./node_modules/antd/dist/antd.css (./node_modules/css-loader/dist/cjs.js??ruleSet[1].rules[1].oneOf[5].use[1]!./node_modules/postcss-loader/dist/cjs.js??ruleSet[1].rules[1].oneOf[5].use[2]!./node_modules/source
浏览 47提问于2022-03-16得票数 24
回答已采纳
我正在尝试创建一个自定义网格结构。
该结构将由不同的行组成，每行可以有多列。每列将有1-2个表单域。
在Antd v4.2.0中，我们有帮助我们创建动态表单的<Form.List />组件。
我试过使用它，它可以用于动态行部分，但我不知道如何在<Form.List>中创建多个列，即<Form.List>
我也可以手动创建此网格，但我也希望在此网格中利用表单验证。
我正在尝试创建的视觉表示：
浏览 0提问于2020-05-06得票数 2
我有一个具有初始值的antd形式。如果任何值发生变化，我希望有条件地呈现一个重置按钮。有没有办法找出任何值是否发生了变化？
浏览 4提问于2021-05-05得票数 0
我在OBIEE 12c的RPD中有一个会话变量，我想在其中放入一小段sql代码作为默认初始化器。它只选择一行，但这会产生一个语法错误( sql是正确的，我已经测试过了)。这个是可能的吗？或者，有没有其他方法可以将默认设置动态化？
还有一件事:我只在表达式构建器的标签“category”中有类别常量。
浏览 12提问于2017-03-10得票数 0
1回答
我使用rails new demo -j esbuild --css tailwind创建了一个Rails 7应用程序。我对组件使用antd包，并希望使用ant设计样式表和顺风样式表。
将外部样式表添加到默认样式的顺风。我使用它并将application.tailwind.css文件设置为：
@import "~antd/dist/antd.css";
@import "tailwindcss/base";
@import "tailwindcss/components";
@import "tailwindcss/utilities&
浏览 10提问于2021-12-23得票数 2
回答已采纳
1回答
我在antd Select中设置初始值时遇到问题
const options=[{name:'john',id:1},{name:'jack',id:2},{name:'jill',id:3}]
<Form initialValues={{user:3}}>
<Form.Item name="user" label="Select user">
<Select value="3">
{options.map((user
浏览 1提问于2021-05-14得票数 0
我正在将Redux-saga中的currentUser数据传递到antd表单中，姓名、电子邮件、电话号码、简介将作为初始值传递给表单，我想做的是，如果初始值已更改，我希望将表单作为put请求提交给数据库。以下是我的代码 import React from 'react';
import {createStructuredSelector} from 'reselect';
import { connect } from 'react-redux';
import { selectCurrentUser } from '../../re
浏览 31提问于2020-04-25得票数 12
5回答
使用antd表单initialValue是正确的吗？
我想知道，如果antd表单initialValue用于设置初始数据，或者只是在表单没有值时显示值。
const Component = ({ id }) => {
const initialName = 'John'
const { data } = useQuery(GET_NAME, { variables: { id } })
if (data) {
initialName = data.name
}
return (
<Form.Item>
{form.
浏览 7提问于2020-05-18得票数 5
回答已采纳
我使用Muse Antd设计模板与antd版本的"antd": "^4.16.6"。
我有一个蚂蚁设计表单，在提交表单以编辑现有记录之前，我正在填充数据。
currencyConversionById是我要编辑的对象/记录。其结构如下：-
currencyConversionById = {
base_currency : "USD",
base_amount : 1,
to_currency : "CAD",
to_amount : 2.45
}
currencyL
浏览 1提问于2022-06-07得票数 0
使用对象初始值设定项语法创建新类型时，Visual Studio会自动移动大括号以与new关键字后面的类型对齐。
像这样
MyType myType = new MyType
{
};
然而，我不希望它这样做，而是让它像这样
MyType myType = new MyType
{
};
我已经检查了所有的Visual Studio格式选项，但找不到一个合适的
有什么想法吗？
浏览 0提问于2012-02-10得票数 9
回答已采纳
1回答
在我的React中，修补AutoComplete的值是有问题的。我传递的值仅为id，因为您可以在代码框中看到function App({ member_status = 1 })。自动完成需要整个对象来修补其值。我该怎么修补它？
请看下面我的密码箱
码
function App({ member_status = 1 })
initialValues={{
member_status: member_status
}}
浏览 5提问于2020-08-20得票数 0
回答已采纳
2回答
这是一个由Vite & React & antd组成的项目。
我想在vite.config.ts中动态地处理antd主题。
如果您能告诉我如何修改React组件中的less.modifyVars值，我将不胜感激。
这是当前的屏幕。
/
在暗模式下，选择组件的样式不能正常工作。
import { getThemeVariables } from 'antd/dist/theme'
...
css: {
modules: {
localsConvention: 'camelCaseOnly'
},
preprocessor
浏览 31提问于2021-09-03得票数 4
回答已采纳
1回答
捆绑的所有组件
、、
我刚刚升级到了webpack 4和巴别塔7，并注意到我的捆绑包的大小增加了很多。
使用包分析器，我可以看到antd和它的依赖项大约是我的1.7mb包中的1MB。
在开发模式下捆绑时，我可以看到所有的antd组件都包含在内，即使我的应用程序当前只导入了一个按钮
import { Button } from 'antd';
....
我如何才能只加载我需要的内容？下面是我的相关配置
//webpack.config
{
devtool: false,
mode: 'production',
entry: [
'@babel/poly
浏览 3提问于2018-10-31得票数 0
我已经实现了以下Antd Grid。
<Row>
<Col>
<DynamicComponentOne />
</Col>
<Col>
<DynamicComponentTwo />
</Col>
</Row>
因为动态组件宽度是在页面加载之后定义的。它从网格行溢出。
浏览 1提问于2021-06-10得票数 0
7回答
antd设计选择占位符问题
、、、、
我在我的反应应用程序中使用antd设计。
下面是我所面临的问题的代码片段：
<Select
showSearch
optionFilterProp = "children"
placeholder = "Select Company"
value = "{this.state.company}"
name = "company"
onSelect = "{this.handleCompanyChange}"
>
现在它显示了如果this
浏览 5提问于2017-08-07得票数 25
回答已采纳
我有一个反应式，循环一些数据。我想在这里设置无线电按钮的默认值。它起作用，但验证不起作用。
<fieldset *ngIf="question.radioButtonList.length > 0">
<div class="choice-list">
<div *ngFor="let item of question.radioButtonList" class="choice-list-item">
<input type=
浏览 2提问于2017-03-16得票数 2
回答已采纳
在C#中，我有一些静态只读属性，如下所示：
/// Provides the thingie.
public static readonly SomeClass Thingie = new SomeClass("Thingie Name");
在一个更大的班级里。Doxygen在文档中生成一个静态公共属性部分(不出所料)，其中包含Thingie条目，这是我确实想要的。但是，它还包含声明，如下所示：
+--------------------------+-----------------------------------------+
|static readonly Som
浏览 2提问于2013-03-24得票数 0
回答已采纳
1回答
我有一个关于信号强度值的问题。
我想将信号强度值放入onCreate函数中，但它给我的值为零。但是当我在PhoneStateListener中测试它时，它给出的值是7，你知道吗？这是我的代码。
package com.example.activitylifecycle;
import android.app.Activity;
import android.content.Context;
import android.os.Bundle;
import android.telephony.PhoneStateListener;
import android.telephony.Telepho
浏览 0提问于2013-03-18得票数 0
我试着去理解antd。 这里有documentation Table示例3。当单选按钮被单击时，此状态被设置，行被选中。如果我单击行中的一个单元格，该行也应该被选中，并且单选按钮的检查状态应该被设置。 有谁知道怎么做吗？ import React from 'react';
import { Table } from 'antd';
import 'antd/dist/antd.css';
const columns = [
{
title: 'Name',
dataIndex:
浏览 130提问于2021-03-27得票数 0
回答已采纳
我有一个简单的问题-是否可以在formik antd中使用<Form.List />？我试着找到关于它的信息，但在3个小时内什么也找不到。我需要在表单中添加动态字段，我想像在antd中一样使用<Form.List />，但我使用的是'formik-antd‘。看起来像'formik-antd‘no Form.List..:(仅限Form.Item。
有没有人知道“formik- Any”有<Form.List />还是类似的东西？
浏览 0提问于2020-07-05得票数 0
我在Qt Creator GUI设计器中输入了一个空格作为QLineEdit的文本。我可以在设计器中看到这个空格，但是如果我编译并运行它，这个空格就消失了。我希望这个空格成为QLineEdit的默认文本，如何设置它，或者告诉Qt不要删除那个空格？
浏览 4提问于2012-08-07得票数 3
回答已采纳
1回答
我在使用在antd4中创建动态表单时遇到了一个问题。
我想使用动态表单来编辑已经有一些值的对象。
在这个沙箱中，我创建了一个新的初始值数组：
我们的目标是在打开表单时达到这种状态：
感谢您的帮助。
浏览 4提问于2020-05-07得票数 4
回答已采纳
我正在使用Antd3.x库中的和mode="multiple“等选项，如下面的代码框链接所示。即使设置showSearch={false}，搜索也不会被禁用。
现在，我不能升级到Antd 4.x。问题是当我在我的网络应用程序上使用时，它抱怨在我的选择中有一个额外的“输入”，它没有咏叹调标签集。如果我在铬控制台中手动设置它，一切都很好。
是否有一种方法可以通过移除搜索字段(不确定如何处理)来解决这种情况？或者以某种方式将输入的咏叹调设置为类似的咏叹调-lable=“search”？
提亚
浏览 3提问于2021-02-09得票数 2
我必须在我的antd输入字段中只输入数字。但它接受数字和字母。因为我的需求逻辑工作得很好，除了字母表。那么，我该如何编写一个只接受数字的正则表达式呢？ import React from 'react'
import * as AntD from "antd";
import { Input, Tooltip } from 'antd';
const { Row, Col } = AntD;
function creditCardFormatter(value) {
var v = value.replace(/\s+/g, '&
浏览 4提问于2019-03-15得票数 5
1回答
我如何使用JMeter用这个动态网址测试我网站的这个页面？
URL：
http://********************/index.php?theme=%7BC9F11D78-448E-4EAC-A766-C904ED98458E%7D&eventName=IncidentsItem&PHPSESSID=fb32581st66uvg1vnrpaj66fl5&internalurltime=1511811034521
浏览 0提问于2017-11-28得票数 0
1回答
我正在创建一个jasper报告。报告的默认大小为A4。我想动态更改报表的高度。我正在使用HTML，它创建了一个A4大小的Export.So (即使内容大小是A4大小的一半)。如果报告内容大小小，我希望html页面大小也小。
有可能实现吗？
浏览 3提问于2010-02-16得票数 0
回答已采纳
我的更新配置文件数据的react表单目前只在所有输入都已更改时才与防火墙交互。
电流误差；
TypeError:无法读取未定义的“@ profileActions.js:10:4”的属性'0‘
我试过检查的东西--道具分派给'updateProfile‘函数--将'onChange’函数更改为'onSubmit‘--不起作用--向所有输入字段添加必需内容--不起作用--用占位符替换defaultValue --不起作用
Profile.js
import React, { Component } from "react";
import
浏览 0提问于2019-02-27得票数 0
下面我正在使用Delphi 7作为示例按钮组件的代码。当我在设计时在表单上放置按钮组件时，它在Delphi7中显示不同的颜色，如屏幕快照中所附。
在Delphi 5中，同样工作得很好。我的意思是它把标题显示为黑色。
unit TestButton1;
interface
uses
Windows, Messages, SysUtils, Classes, Graphics, Controls, Forms, Dialogs,
StdCtrls, ExtCtrls, Math;
type
TButtonShape = (bsRectangle, bsOval, bsTrian
浏览 2提问于2015-07-28得票数 0
回答已采纳
我正在应用程序控制器中更改区域设置
before_filter :set_locale
def set_locale
I18n.locale = params[:hl] || I18n.default_locale
end
用于包含呈现的部分并具有生成菜单项的布局的页面。
页面中的静态文本会被翻译成新的语言环境，而布局中的静态文本则不会，包括生成的菜单项。
这看起来像是线程问题。
浏览 0提问于2010-03-11得票数 2
在我们相当复杂的表单中，我们有一个动态表单字段(与antd文档中的示例类似，除了使用Select字段外)。我们使用initialValue从数据库中输入表单数据，现在我们希望将动态添加的Select字段设置为一个默认值。
问题在于，不可能将initialValue添加到尚未呈现+窗体的字段中，不知道将添加多少动态选择字段。
因此，我本能地求助于Select上的defaultValue道具，在我看来，它应该能工作，但它不能工作。(在antd 4中，没有带有defaultValue的fieldDescriptor )。
也许这个例子能更好地解释我想说的话：
如果在示例中添加一个字段并点击submi
浏览 3提问于2020-02-13得票数 0
antd是一个巨大的库。当我这样做的时候
"npm i antd" it downloads the whole library.
我只想使用antd库中的DatePicker。
如果有办法的话，请告诉我。
我不想使用其他日期选择器库，因为antd完全满足了我的条件
浏览 0提问于2021-03-15得票数 1
尝试使用clojurescript中的antd，我正在寻找一种惯用的方法来解构js对象。因此，假设我们想要这样做。 import { Layout } from 'antd';
const { Header, Footer, Sider, Content } = Layout; 我如何才能在clojurescript中做到这一点，而不必编写详细的 (let [Sider (.-Sider antd/Layout)
Header (.-Header antd/Layout)
Content (.-Content antd/Lay
浏览 42提问于2019-10-08得票数 0
1回答
有没有从代码中运行混合模式的选项，而不是在ant中直接在xml中调用它？
我的用例是，我必须在测试中同时运行junit3和junit4用例。
现在我正在从代码中动态地生成xml，
XmlTest测试=新XmlTest(套件)；test.setName(testCase)；test.setJunit(真)；
浏览 1提问于2013-05-14得票数 0
回答已采纳
我正在使用x-data动态构建我的HTML。我有两个锚标签，它们充当标签按钮，根据点击的链接‘x-show’一个段落。我还希望锚定标记在表单的select元素上选择一个选项。当你开始点击按钮，但最初的选择选项是空的时，它会起作用吗？
<script src="https://cdn.jsdelivr.net/gh/alpinejs/alpine@v2.x.x/dist/alpine.min.js"></script>
<div x-data="{activeTab : window.location.hash ? window.loca
浏览 1提问于2020-10-04得票数 1
1回答
antd v3创建表单不可用
、、、、
下面的代码使用antd v3，对于antd v4 -- form.create()已经不可用了，我阅读了文档，它显示了用useform.I替换form.create()，我试着把它放到代码中(第二段代码)，但仍然无法工作。如何在代码中使用useForm？
import React from 'react'
import {Form, Input} from 'antd'
const EditableContext = React.createContext();
const EditableRow = ({ form, index, ...props })
浏览 3提问于2022-01-20得票数 0
因此，我正在尝试从中呈现一些Tabs (在这里使用3.x，就像在我的实际应用程序中一样，但我敢打赌，在4.x中，这与它完全相同)，我需要在我的应用程序的不同部分中重用它。其中一些选项卡依赖于来自API检索的模式的动态数据。根据这些数据，制表符的内容会发生变化，或者某些选项卡甚至不会呈现。
长话短说，我试图用这个片段简化我的用例。我希望有一个给定所需数据的<DynamicTabPanes />组件能够处理逻辑并返回所需的TabPanes。
很明显，Ant Design不喜欢这个。如果我使用我的组件，比如：
<Tabs>
<DynamicTabPanes data
浏览 2提问于2021-04-29得票数 1
回答已采纳
2回答
对于某些人来说，这可能是一个简单的问题。在AntD的表单文档和演示中，他们的演示一开始就没有字段。您必须单击动态表单的"+ Add Field“按钮来添加并显示第一个字段，如下所示。
如果我想让它从显示第一个字段开始，而不必首先单击"+ Add Field“按钮，该如何实现呢？似乎我需要在渲染时以某种方式调用add函数？无论如何，我希望它能在最初加载表单时显示第一个乘客，比如在我按下Add Field按钮后的屏幕截图中。
换句话说，我希望总是至少有一名乘客。
他们的演示代码可以在上面的链接中查看，该链接将您带到他们的文档，但这里也是：
import { Fo
浏览 110提问于2020-05-16得票数 4
回答已采纳
我正在为我的选择表单组件使用Ant Design，并且我想测试Option值，因为这些值将根据用户在填写时所做的不同选择而动态变化。 my-test.spec.js let questionDropdown
await waitFor(() => {
questionDropdown = screen.getByRole('combobox', { name: 'Question'})
expect(questionDropdown).toBeDefined()
})
fir
浏览 253提问于2020-07-10得票数 0
我目前正在使用Red Gate的Performance Profiler来优化应用程序。我经常遇到由VS生成的声明，并且总是需要大约一秒钟的时间来声明。它也被设置为null。我不明白为什么这要花一秒钟的时间。我知道VS Designer可以对一些组件使用它，但是有没有办法减少这些声明的数量呢？如果能解释为什么会发生这种情况，那就更好了。
浏览 3提问于2012-08-09得票数 1
回答已采纳
扫码
添加站长 进交流群
领取专属 10元无门槛券
手把手带您无忧上云
相关资讯
热门标签
云服务器
ICP备案
对象存储
即时通信 IM
实时音视频活动推荐
腾讯云开发者
