问题

[antd: Form.Item] `defaultValue` will not work on controlled Field. You should use `initialValues` o

原因：antd禁止在form.item下的组件使用默认属性
解决办法：删除defaultValue,在中使用initialValue={{ parentId: parentId }}代替，如果要动态更新 parentId的值，又会导致下面的问题

React does not recognize the `initialValue` prop on a DOM element.

**原因：**不能通过这种方法更新parentId的值，想要更新props中的值，要通过form.setFieldsValue({ parentId: parentId })进行更改，

你不能用控件的 value 或 defaultValue 等属性来设置表单域的值，默认值可以用 Form 里的 initialValues 来设置。注意 initialValues 不能被 setState 动态更新，你需要用 setFieldsValue 来更新。

由上可知，表单中不能设置默认值，要想设置默认值必须通过form中的initial Values进行设置，但是其又不能动态更新，想要达到动态更新的效果必须使用form中的setFieldsValue进行更新，需要检测parentId的变化从而对parentId进行修改，固需要在useEffect中使用setFieldsValue

如果需要在父组件中得到子组件的form表单中的值，可以通过函数传参的方式，将子组件的form对象传递给父组件，这样父组件得到子组件的form对象，就可以通过getFieldValue得到表单的值了。

    const [form] = Form.useForm()//将子组件的form传递给父组件，使得父组件可以取到子组件form中的categorieName的值props.setForm(form)// 动态更新parentId的值useEffect(() => {form.setFieldsValue({ parentId: parentId })}, [parentId])

import React, { Fragment, useEffect } from 'react'
import { Form, Input, Select } from 'antd'
import { useForm } from 'antd/lib/form/Form';const { Option } = Select;export default function AddForm(props) {const { categorys, parentId } = propsconst [form] = Form.useForm()console.log(parentId)// 动态更新parentId的值useEffect(() => {form.setFieldsValue({ parentId: parentId })}, [parentId])return (<Fragment>{/* initialValues不能被动态更新，需要使用form.setFieldsValues进行动态更新，将其放在useEffect中 */}<Form form={form}><span>所属分类</span><Form.Itemname="parentId"rules={[{required: true,message: 'Please select category!',},]}>{/* 表单中不能使用默认属性defaultValue，在form中使用initialValues{{}}代替 */}<Select ><Option value='0'>一级分类</Option>{categorys.map(c => <Option key={c._id} value={c._id}>{c.name}</Option>)}</Select></Form.Item><span>分类名称</span><Form.Itemname="categoryName"rules={[{required: true,message: 'Please input your categoryName!'}]}><Input placeholder="添加分类" /></Form.Item></Form></Fragment >)
}

动态更新initialValue的值相关推荐

django 动态更新属性值
django 动态更新属性值 class TestTime(models.Model):"""功能说明:指定测试的每一关总用时"""test ...
chosen.jquery.js 、chosen-select 源码修改控制 chosen:updated 方法动态更新下拉框选项不更新搜索框值，chosen 实现远程搜索加载下拉选项
chosen.jquery.js .chosen-select 源码修改控制 chosen:updated 方法动态更新下拉框选项不更新搜索框值,chosen 实现远程搜索加载下拉选项 chosen. ...
牛客练习赛84：牛客推荐系统开发之标签重复度（点分治+动态开点权值线段树）
题意: 给你一棵树,问树上所有两点路径上的(最大值最小值乘积)之和. 题解: 很明显的一个点分治问题,然后就是个二维偏序问题了(虽然我也不知道啥是二维偏序). 点分治不难,重点是点分治内cal函数如何 ...
Centos DNS服务(二)-bind主从配置与基于TSIG加密的动态更新
DNS的主从配置 DNS从服务器也叫辅服DNS服务器,如果网络上某个节点只有一台DNS服务器的话,首先服务器的抗压能力是有限的,当压力达到一定的程度,服务器就可能会宕机罢工, 其次如果这台服务器出现了 ...
h5 数字变化_前端/h5 D3.js实现根据数据动态更新图形/类似进度实时变化效果
最近接到一个需求,在满足规则下,实现类似这种展示效果,其实就是用图形反映数据(NK,一种干扰值) 运行后,它其实是不断在动的,每格都可能显示灰色或者彩色这里一共是10个格子,每格代表一个范围边界,说 ...
html.编辑数据回显,从HTML表格编辑/更新MySQL数据库值
我有一个表单,目前提交值到MySQL数据库.在每次提交完成后,刚刚插入到mysql数据库的数据将在表单下回显.该表格具有动态输入字段.我知道想要添加编辑以前插入的值的可能性.我放置了一个编辑按钮,将用 ...
iOS之深入解析如何构建动态库与framework动态更新
一.动态库的构建步骤 ① 创建动态库创建一个动态库 MyDynamicFramework: 创建一个测试类: 在 MyDynamicFramework.h(默认生成,可统一暴露头文件) 中 #imp ...
Nacos支持配置的动态更新
// 注入配置文件上下文 @Autowired private ConfigurableApplicationContext applicationContext;@GetMapping(value ...
ElasticSearch探索之路（五）集群与分片：选举、动态更新、近实时搜索、事务日志、段合并
文章目录集群内部原理集群与节点分片选举分片内部原理索引不变性动态更新索引近实时搜索事务日志段合并集群内部原理集群与节点一个运行中的Elasticsearch实例称为一个节点, ...

动态更新initialValue的值

问题

[antd: Form.Item] `defaultValue` will not work on controlled Field. You should use `initialValues` o

React does not recognize the `initialValue` prop on a DOM element.

你不能用控件的 value 或 defaultValue 等属性来设置表单域的值，默认值可以用 Form 里的 initialValues 来设置。注意 initialValues 不能被 setState 动态更新，你需要用 setFieldsValue 来更新。

动态更新initialValue的值相关推荐

最新文章

热门文章

动态更新initialValue的值

问题

[antd: Form.Item] defaultValue will not work on controlled Field. You should use initialValues o

React does not recognize the initialValue prop on a DOM element.

你不能用控件的 value 或 defaultValue 等属性来设置表单域的值，默认值可以用 Form 里的 initialValues 来设置。注意 initialValues 不能被 setState 动态更新，你需要用 setFieldsValue 来更新。

动态更新initialValue的值相关推荐

最新文章

热门文章

[antd: Form.Item] `defaultValue` will not work on controlled Field. You should use `initialValues` o

React does not recognize the `initialValue` prop on a DOM element.