如何从Form.Item访问数据？
从Form.Item访问数据的方法是通过getFieldDecorator方法来实现。getFieldDecorator是antd库中的一个高阶函数，用于将表单控件与表单数据进行双向绑定。
具体步骤如下：
- 在表单组件中引入getFieldDecorator方法：import { Form } from 'antd';
- 在render函数中，使用getFieldDecorator方法包裹需要访问数据的表单控件，例如一个Input组件：
- 在render函数中，使用getFieldDecorator方法包裹需要访问数据的表单控件，例如一个Input组件：
- 这里的'fieldName'是表单数据的字段名，可以根据实际情况进行命名。
- 在其他地方需要访问表单数据时，可以通过this.props.form.getFieldValue('fieldName')来获取对应字段的值。例如：
- 在其他地方需要访问表单数据时，可以通过this.props.form.getFieldValue('fieldName')来获取对应字段的值。例如：
- 这里的this.props.form是通过高阶组件Form.create()包装后传递给当前组件的属性。
通过以上步骤，就可以实现从Form.Item访问数据的功能。
推荐的腾讯云相关产品：腾讯云云服务器（CVM）
- 产品介绍链接地址：https://cloud.tencent.com/product/cvm
- 优势：腾讯云云服务器提供高性能、可扩展的云计算服务，支持多种操作系统和应用场景，具备高可用性和可靠性。
- 应用场景：适用于网站托管、应用程序部署、大数据分析、游戏服务等各种云计算场景。
注意：本答案中没有提及亚马逊AWS、Azure、阿里云、华为云、天翼云、GoDaddy、Namecheap、Google等流行的云计算品牌商，如需了解更多相关品牌商的信息，请自行搜索。
相关·内容
1回答
我有下一个申请：
演示：
在这里，我尝试保存数据点击一个按钮- Main Submit，但现在如果我想保存数据从Add field功能，我必须保存数据点击Submit按钮，因此我有两个按钮来保存所有的数据。
<Form
{...layout}
name="basic"
initialValues={{ remember: true }}
onFinish={onFinish}
onFinishFailed={onFinishFailed}
>
<Form.Item
浏览 2提问于2020-06-09得票数 0
我在react应用程序中使用来自Ant设计库的Form.Provider。我使用它，因为我在main form中生成内部表单。我的目标是，当我点击SUBMIT按钮时，同时从外部表单和内部表单输出数据。内部表单的数量取决于用户，因此他可以生成任意数量的表单。我的外部表单：
<Form.Provider
onFormFinish={(name, { values, forms }) => {
console.log(forms);
if (name === "inner") {
cons
浏览 0提问于2020-06-10得票数 1
我尝试使用Main和SubForm从2表单( getFieldValue() )保存数据。这里应该同时显示两种形式的数据：
const save = () => {
console.log(myRef.current.getFieldValue());
};
现在，当我单击save处理程序时，会得到一个空对象。如果删除<SubForm/>，就会从主表单中获得值，但如果再次添加第二个表单，则无法从这两个表单中获得数据。，br>如何使用getFieldValue()从两个窗体获取数据，单击“保存”按钮
演示：
我的代码之一是：
<Form
浏览 3提问于2020-06-29得票数 2
回答已采纳
我在reactJS和蚂蚁设计方面都很新。现在，我试图从一个Form.List中获得一个值，我想使它/呈现为json嵌套数据输出。
我的完整代码：
import { MinusCircleOutlined, PlusOutlined } from '@ant-design/icons';
import { Button, Form, Input, Space, DatePicker, Select } from 'antd';
import axios from 'axios'
import { useNavigate } from 're
浏览 13提问于2022-08-22得票数 0
回答已采纳
我开发了一个应用程序，用户可以在主表单标记内添加动态字段，因此他们将能够添加他们想要的任何字段。现在我有两个按钮：
Entire Form Submit和Dynamic form Submit。
单击第一个我将获得整个数据表单，但当我单击第二个表单时，我也会获得相同的数据，但我只想从<DynamicFormComponent/>中获得数据。点击我想要进入的第二个按钮，我将获得的数据：
const onFinishDynamic = values => {
console.log("Received values of dynamic form:"
浏览 4提问于2020-07-07得票数 2
我在用蚂蚁设计库。有useForm()钩子来重置值。
所有的值都被重置为原始值，而不是Radio.Group。
如何从状态将单选按钮状态重置为priority值？
const [priority, setPriority] = useState(2);
const [form] = Form.useForm();
const onSubmit = (values) => {
console.log('Received values of form: ', values);
form.resetFields();
}
<Form
浏览 5提问于2020-05-10得票数 0
回答已采纳
1回答
我有一个应用程序，其中用户必须输入有关它的数据，在保存form后，数据应该以某种形式输出。
const ParrentForm = () => {
const [carNr, setCarNr] = useState([]);
const onFinish = (values) => {
const { firstName, lastName } = values;
const user = {
firstName,
lastName,
things: {
cars: []
}
}
浏览 0提问于2020-08-19得票数 2
3回答
我在我的react应用程序中使用了ant设计。我有下一个表单：
const Demo = () => {
const onFinish = (values) => {
console.log('Success:', values);
};
const onFinishFailed = (errorInfo) => {
console.log('Failed:', errorInfo);
};
return (
<Form
{...layout}
name="
浏览 0提问于2021-06-08得票数 0
我正在使用reactjs，蚂蚁设计和蚂蚁设计亲我的项目，我有一个像下面的代码形式。Option的数据从api加载。我如何选择每次选择一个选项时，该选项的信息都会向下显示到ProDescriptions
Props.onInsertObjectFinish(值)}>
<Form.Item name="TopicId" label="ID chủ đề ">
<Input id="TopicId" type="hidden" value={currentRow?.id}/
浏览 57提问于2021-03-09得票数 0
我查看了ant.design表单的所有示例，但找不到验证文本框最小长度的方法。你能帮帮忙吗？
import { Form, Icon, Input, Button, Checkbox } from 'antd';
class NormalLoginForm extends React.Component {
handleSubmit = e => {
e.preventDefault();
this.props.form.validateFields((err, values) => {
if (!err) {
浏览 1提问于2019-07-19得票数 5
1回答
我正在构建一个注册页面，它将数据保存在一个API中，但它一直返回一个error 400 bad request，即使我正确地发送了所有数据，它也显示需要电子邮件和密码。我检查了一下，根据表单中键入的内容，电子邮件和密码都正确发送了。 const [manager, setManager] = useState({
company: "" ,
email: "",
password: "",
accessLevel:1
})
console.log(manager)
con
浏览 9提问于2020-10-06得票数 0
2回答
我试图使内联表单设计使用蚂蚁设计，但我不能使其定制的版本。我已经附上了代码，从代码输出的图像和我想要的形式应该是什么样子。代码如下：
const layout = {
labelCol: { span: 8 },
wrapperCol: { span: 16 },
};
const layoutInline ={
labelCol: {
sm: {
offset: 0,
span: 20,
},
},
wrapperCol: {
sm: {
offset: 30,
span: 30,
},
浏览 3提问于2021-02-18得票数 0
我想从我的选择中检索值，这样我就可以发出post请求。我没有问题从文本输入，但由于某种原因，我不能从下拉菜单选择它。最后我得到了一个"TypeError: Cannot read property 'value' of undefined"
这是我正在使用的代码。
import React from "react";
import { Form, Input, Button, Select } from "antd";
const { Option } = Select;
class ItemForm extends Reac
浏览 8提问于2019-04-22得票数 13
回答已采纳
当我按下"enter“键时，如何删除输入框的焦点？
我有这样的代码：
import React, { useState } from "react";
import "antd/dist/antd.css";
import { Form, Input, Button, Card } from "antd";
function Login() {
const [loadings, setloadings] = useState(false);
const [disabledLoading, setDisabledLoading]
浏览 9提问于2021-06-05得票数 2
回答已采纳
3回答
使用ant设计开关的正确方法是什么?我无法从正式文档中获得多少。
这是我如何使用它。
<Form form={form} layout="vertical">
<Form.Item
label="Description"
name="description"
rules={[{ required: true, message: 'Enter a description' }]}
>
<Input placeholder="Enter Descriptio
浏览 4提问于2021-10-25得票数 2
回答已采纳
我正在将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
1回答
我有一个具有根<Form>的父组件。子组件有另一个需要验证的字段。但是子组件是从数据映射而来的，一旦我试图更改一个字段，它就会更改每个字段。
代码：
<Form id="myForm" name="basic" onFinish={onSubmit}>
<Form.Item
name="title"
rules={[
{
required: true,
message: "Please input your title
浏览 8提问于2022-07-28得票数 0
回答已采纳
今天我挣扎了好几个小时。但是，我仍然不能解决这个问题。我现在使用React和Ant Design Form来发布数据，但是如果我将表放在那里，我无法从Form.Item获得任何数据，有没有更好的解决方案？
下面是我的代码：
const items = [
{
job: 'Engineer',
age: 20
},
{
job: 'Accountant',
age: 24
}
]
const onCreate = (values) => {
console.log(val
浏览 2提问于2021-09-06得票数 0
如何使用状态将图链接到表单，所以当表单更改时，图形也会自动更新，甚至表单也还没有提交呢？该图形只是使用showCarrot生成一个chart.js元素。
我发现initialValues作为表单的fields，但不知道如何将这一切联系在一起。谁能帮我从精神错乱中拯救出来？
更新:我认为Ant是基于的，仍然不知道这有什么帮助，但它是一条线索。
这就是我设置并传播到我的表单和图形的状态
const [showCarrot, setCarrot] = useState<ICarrotArray>([]);
这是我的表单和表格来编辑数据
<Form form={form} init
浏览 0提问于2020-05-10得票数 0
我想在按下一个按钮后动态添加2个文本框，使用ant设计，如图所示，同时删除带有(减号)按钮的文本框，将这些数据存储在数组initialState中，我该如何实现？
import ReactDOM from "react-dom";
import "antd/dist/antd.css";
import { Form, Input, Button } from "antd";
function DualInput({form}) {
const {getFieldDecorator} = form
const initi
浏览 37提问于2019-07-19得票数 2
我从后端动态加载数据。完成后，它会更新state对象： componentDidMount = ()=>{
let response = await axios.get('/api/entity/' + id);
if (response.data && response.data.result){
this.setState({item: response.data.entity});
} else {
this.setState({sta
浏览 24提问于2020-11-08得票数 1
我有一个登录表单，在那里按钮点击数据应该发送到后端。我使用ant设计，并在Form action属性上传递服务url (action={url})，其中将发送数据。但是，当我单击submit按钮时，什么都不会发生。我尝试将antd表单更改为与antd表单控制器一起使用html表单，比如Form.Item和输入组件，然后提交数据。我怀疑问题在antd action属性中。如何制作一个antD表单来使用action属性提交数据？
const handleSubmit = (val) => {
console.log("Values
浏览 2提问于2022-06-17得票数 0
回答已采纳
export function URLInput() {
const [value, setValue] = useState("");
return (
<Row>
<Col span={24}>
<FloatLabel label="URL" name="url" labelValue={value}>
<Form.Item
hasFeedback
name="url"
浏览 41提问于2020-07-17得票数 0
回答已采纳
我正在创建一个CRM网站。我需要编辑我的表单，它需要将数据预加载到表单中。我尝试将我的数据首字母缩写到字段中。但它显示的是对象对象。我能知道如何解决这种情况吗？“ “” “” “” “” “” “ 我的代码： <Form name="dynamic_form_nest_item" onFinish={onFinish}>
{/* {console.log(typeof timeSlotObj)}
{console.log(timeSlotObj.timeSlots)} */}
<Form.List name="
浏览 49提问于2021-04-14得票数 0
我正在寻找隐藏一个输入域的基础上选择的值在一个antd表单中的另一个。我指的是this question (看看一些人是如何支持(并接受) this answer的。但是，它对我不起作用。也许是因为我在动态表单设置中使用它？ 不管怎样，下面是我的代码(我试图在status的基础上隐藏business_name字段)： <Form initialValues={{relative: [{"status": "Business", "business_name": "ABC inc"}, {"status":
浏览 156提问于2020-07-15得票数 0
2回答
我正在使用antd模板进行表单设计。提交表单后，输入值将不被清除。
我尝试了this.props.form.resetFields()，它不能工作，得到了以下错误
Unhandled Rejection (TypeError): Cannot read property 'resetFields' of undefined
import React, { Component, useState } from 'react';
import PropTypes from 'prop-types';
import {
Form,
浏览 2提问于2020-08-24得票数 5
回答已采纳
我为ReactJS开发了一个组件，将其与Antd的表单一起用作表单项。但是，onFinish回调函数返回未定义的自定义组件值。可能，Antd的表单无法从我的组件中检索值。如果我只使用Antd组件作为表单项，则不会发生这种情况。
在下面的示例中，MultipleEntry是我开发的组件。MultipleEntry有一个嵌套的TextArea组件。
function Sandbox(props) {
return (
<>
<Form onFinish={(values) => console.log(values)}>
浏览 3提问于2020-06-25得票数 4
回答已采纳
如何使用Django_Rest框架使用axios上传图像文件--我有一个简单的模型：
class Article(models.Model):
title = models.CharField(max_length=120)
text = models.TextField()
img = models.ImageField(upload_to='article_images/', blank=True, null=True)
create_time = models.DateTimeField(default=datetime.utcnow,
浏览 1提问于2019-02-14得票数 1
回答已采纳
2回答
当用户在页面' a‘中，在表单输入字段中写了一些东西，然后从页面a转到页面b并从那里返回页面a时，如果用户想要从url获取数据，这里可能有两个具有相同名称的名称，例如this is url ?name=james&name=alex我的问题是如何获得最新的' name’例如名称name=alex是新的。下面是我如何从url得到的： const query = window.location.toString().split("?")[1];
const urlParams = new URLSearchParams(query);
const
浏览 31提问于2021-03-31得票数 2
2回答
我正在尝试创建一个表单，该表单基于JSON响应动态映射字段。
目前，我有一个正在状态设置的虚拟对象，但最后阶段将从外部API调用接收数据。随着时间的推移，数据集可能会发生变化，根据业务需要添加或删除键/值。代替这一点，我需要创建一个智能组件，它接受一组初始数据，并为对象中的每个键/值对映射一个“只读”字段。
第二个问题是实际的表单布局。下面有一个初始的脚手架，我只对列和行进行了硬编码。如何实现从数据响应中创建两列行的逻辑？
任何关于这方面的想法/帮助都是非常感谢的！
代码：
import React, { Component } from 'react';
import { r
浏览 0提问于2019-04-02得票数 1
回答已采纳
3回答
我正试图在React中实现一个两页的表单。在第一页上，我请求一个代码，用于获取第二页上需要显示的一些数据。在这里，我指的是同一页上不同的视图。我面临的问题是，当我收到来自后端API的响应时，我使用state来更新字段的当前状态，而这似乎不会在我需要它时立即发生。当我更改决定呈现哪个视图的属性值时，字段仍然是空的，而不是使用从API获取的值进行更新。现在，我知道setState是异步的，但我不知道如何处理这种情况，因为数据获取是按需完成的，而不是在一开始就完成的，所以我不认为我可以在这项工作中使用useEffect。
这是我的状态：
const [state, setState] = use
浏览 4提问于2022-01-15得票数 1
回答已采纳
我是新反应，试图建立一个登录表单，能够从表单提取用户名和密码。但我在尝试将其传递给mapDispatchToProps以将其分派到后端时遇到了问题。 我如何从"values“获取用户名和密码，并将其实际传递给mapDispatchToProps？ 我得到一个错误，说"onAuth“不能在函数外部访问。 下面是代码片段： const NormalLoginForm = (props) => {
const onFinish = values => {
const onAuth = (values.username, values.password
浏览 18提问于2020-05-03得票数 0
回答已采纳
1回答
我有2个表单域(让它是A，B).Each有共同的下拉选项。如何从B的选项下拉列表中删除A中选择的选项？
<Form.Item
name="B"
label="B"
>
<Select>
<Option value="1"
浏览 0提问于2021-02-24得票数 0
I试图创建一个编辑函数，当我试图从表单中获取值时，比如一个用户正在编辑他的名字，但是他没有编辑他的地址，这将使地址是未定义的，即使我已经在其中设置了一个defaultValue，这在我的非antd表单中是可行的，下面是我的代码
表格：
<Form onFinish={this.edit}>
<Typography>Email</Typography>
<Form.Item
name="email"
>
&
浏览 4提问于2020-06-17得票数 0
1回答
我有一个应用程序，用户可以在表单中添加数据，然后他可以保存数据并获取值。另外，我有一个动态表单<DynamicFieldSet/>，用户可以在其中添加他想要的字段。在动态形式中，我必须在每个表单之间切换。应该切换的组件<Edit/>。因此，当用户单击submit按钮时，应该出现<Edit/>组件，当组件出现时，用户可以切换回单击back to default mode按钮。
场景：用户单击Add field，然后单击Add field to inner，然后填充输入。单击submit inner按钮之后，应该会出现带有输入数据的<Edit/>组件
浏览 0提问于2020-07-06得票数 0
我在其中定义了Form.Item和TimePicker。我用这个表格寄出邮件，但当我邮寄16:35时，它发出了13:35。它不计算UTC偏移量。CreationTime工作得很好，因为它使用Date.now()方法。如何使用UTC+3应用发布日期。
<Modal visible={visible} cancelText={L('Cancel')} okText={L('OK')} onCancel={onCancel} onOk={onCreate} title={'Leave'} destroyOnClose={true}>
&
浏览 9提问于2022-10-10得票数 0
我有设置注册和登录页面..。使用nodejs速成jwt，令牌保存在cookie中。我的目标是检查用户是否已登录，然后在导航栏中显示或隐藏元素。到目前为止，这是我带来的。这个解决方案的问题是，我必须刷新浏览器，因为我必须发出条件呈现的get请求才能工作。请帮帮忙。
function Navbar() {
const [visible, setVisible] = useState(false);
const navigate = useNavigate();
const[isLoggedIn, setIsLoggedIn] = useState(false)
u
浏览 1提问于2022-04-15得票数 1
回答已采纳
1回答
AntD表单返回未定义
、、、、
我对antd表格有问题。代码如下：
const onFinish = (form: any) => {
console.log("FORM: ", form);
//{email: undefined, password: undefined, "": undefined}
};
<Form
onFinish={onFinish}
name="login"
layout="vertical"
浏览 5提问于2022-01-12得票数 0
我试着建立一个类似维基百科的网站，它的编辑功能让我很困扰。
我想我会像这样从DB发送一些数据
{
"post":[
{"title":"SOME TITLE","date":"20-12-2021"},
{"title":"SOME TITLE 2","date":"20-11-2021"}
]
}
对于这些数据，我需要向用户显示数据，以及编辑的选项，因此这意味着标题和日期处于某种状态变量中。
如何做到这一点，我不知道我的问题是正确的，但请以维基百科编
浏览 4提问于2021-12-16得票数 -1
2回答
为什么我不能在输入中输入一个值？问题是:我需要在<Form.Item>中添加一个“名称”来应用这些规则。否则，规则将无法工作，但如果您从name="userName"中删除<Form.Item，则该值将出现在输入端。
我该怎么解决呢？
<Form autoComplete="off" layout="vertical" onFinish={handleFinish}>
<Form.Item name="userName" rules={getTextRule('name')
浏览 1提问于2022-09-22得票数 0
回答已采纳
我在表单中有一个电子邮件字段，它会在每次值更改后验证它是否是有效的电子邮件(例如，当您继续键入时，它会显示错误“电子邮件不是有效的电子邮件”)。 当您单击该字段或提交表单时，如何才能将其更改为仅验证？ 下面是他们示例中的表单： return (
<Form {...layout} name="nest-messages" onFinish={onFinish} validateMessages={validateMessages} component={false}>
<Form.Item name={['user',
浏览 10提问于2021-04-16得票数 0
使用给定的数据： formValues = {
level: {
test: data1,
level2: {
test: data2,
level3: {
test: data3
}
}
}
} 我有一个这样的Ant表单： <Form
form={form}
name="demo"
onFinish={onFinish}
initialValues={formValues}
>
<Form.It
浏览 328提问于2021-04-22得票数 1
2回答
我在一个组件中有一个登录/注册表单，我试图相应地更新URL路径。但我有几个问题要解决。我正在使用Firebase fetchSignInMethodsForEmail()来检查用户是否存在，如果它是一个空数组，它是一个新用户.
当道具是真的。它将呈现输入，并将URL从/login更新为/signup。理想输出：输入任意随机电子邮件地址。从登录->注册并创建密码输入挂载的url更改.
当前的输出是，只有当我单击了用/signup包装的Form.Item时，才会触发(显示)
如果我直接键入path /signup，如何触发redux来分派将更新的操作
我尝试使用useRouteMatch获
浏览 2提问于2019-12-23得票数 3
回答已采纳
1回答
新的反应钩子程序员。这里有antd表单，除了需要对输入进行某种检查之外，一切都很好，我的问题是，如果用户在“businesId”输入字段上写入，例如'1234‘，那么需要从api中检查，如果在此之前不能继续使用表单，但是如果在此之前不能继续使用，则可以继续使用。从api中，我得到了一个对象数组，其中的对象是'businesId‘。我的代码：
<div>
<Form.Item label={"name"} name="name">
<Input type="string"
浏览 2提问于2021-04-03得票数 0
回答已采纳
我想隐藏form.item 1，如果form.item 2被填充了，而反过来的话。我想对下面的代码这样做，但是我找不到解决这个问题的方法。
<Form.Item label="Url">
{getFieldDecorator('url')(<Input/>)}
</Form.Item>
<Form.Item label="Standaard Urls" >
{getFieldDecorator('url_id', {})(this.getSelectUrls())}
<
浏览 7提问于2019-10-09得票数 0
回答已采纳
我试图将来自ant design React.js的数据发布到Python框架工作中。因此，我使用方法OnFinish发送数据，但它不起作用。
我最大的问题是，我不知道如何介绍数据，我想通过使用redux或其他方式从表单发送数据，所以请帮助我。#react.js表格：
import React, { Component } from "react";
import {
Form,
Input,
Button,
PageHeader,
Select,
DatePicker,
message,
} from "antd";
import
浏览 3提问于2020-08-24得票数 1
1回答
我使用Antd + Reactjs ( antd表单、input和select选项)通过单击(+ send ).This按钮动态生成相同的feilds组，但是，我希望根据该选项生成更多feild，方法是从特定行中的选择框中选择select，而不更改所有行的其他feild。我附上了图片，这样你就可以轻松地回答这个问题了。
这是feild的代码，用动态发送按钮进行分类
<Form.List name="variant_rate">
{(fields, { add, remove }) => {
return (
浏览 2提问于2020-10-15得票数 0
2回答
我正在开发一个简单的编辑应用程序页面，因为form.item初始值没有按数据更新，所以我想在ant4.x中进行setFieldsValue，这是我的代码如下所示：
import React from 'react'
import { Modal, Input, Form } from 'antd'
export default function EditApp(props) {
const { visible, rowData: data = {}, onVisibleChange, onEdit, dispatch } = props
co
浏览 11提问于2022-01-27得票数 1
回答已采纳
1回答
我从API接收数据并立即将其传递给<Form> initialValue。但是registerDate是字符串格式，如"01-01-2022“，当<Form.Item>将它传递给<DatePicker>时，我得到了一个错误：
Error: t.clone is not a function [...]
怎么修理呢？在将日期传递到<Datepicker>中的<Form.Item>中之前，我可以格式化它吗？
这里的代码示例：
浏览 4提问于2022-03-03得票数 0
我正在尝试创建一个简单的管理面板，以添加问题到测验应用程序。在生成问题时，我有一个简单的代码片段，它添加了一个React组件，如下所示。
const textQuestion: ReactElement = (
<div>
<Row>
<Col span={16}>
<Form.Item
name={`question${renderTextQuestions.length - 1}`}
rules={[{ required: true, messa
浏览 11提问于2021-06-04得票数 1
扫码
添加站长 进交流群
领取专属 10元无门槛券
手把手带您无忧上云
相关资讯
热门标签
云服务器
ICP备案
对象存储
实时音视频
即时通信 IM活动推荐
腾讯云开发者
