antd setFieldsValue 设置初始值无效&AutoComplete 设置默认值失败

已于 2023-09-12 16:02:34 修改
阅读量494 收藏
点赞数
分类专栏： bug记录 文章标签： antd form autocomplete
于 2023-09-12 16:00:36 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/w_D_lufei/article/details/132834276
版权

antd form setFieldsValue 设置初始值无效

解决方案

setTimeout(()=>{setFieldsValue(values)},100)

antd AutoComplete 设置默认值失败

defaultValue 设置无效

解决方案
设置value，搭配onChange来设置修改

泊一
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
[React] 使用Hooks时使用setFieldsValue设置初始值无效的问题
iChangebaobao的博客
11-22 1906
原文链接： https://juejin.cn/post/6844904129253359623 useEffect(() => { if (formConfigListValues.length === 0) { form.resetFields(); } }, [formConfigListValues]); useEffect(() => { if (statusId) { form.setFieldsValue(
在antd Form表单中select设置初始值操作
01-18
我就废话不多说了，大家还是直接看代码吧~ <Form.Item label=作用对象> {getFieldDecorator('targetId', { initialValue: this.state.targetId }, { rules: [{ required: false, message: '作用对象' }] })( <Select placeholder=请选择作用对象> {targetList.map(entity => <Option key={enti
antd form表单使用setFildesValue 赋值失效问题
weixin_42582488的博客
12-17 3053
用setTimeout设置一个延时
Antd 的表单的setFieldsValue无效问题
qq_42672600的博客
08-04 5067
如果编辑需要用到form的setFieldsValue属性发现第一次调用无效时，就把它写在setState的第二个参数回调函数里面。
form表单使用setFildesValue 赋值不成功问题
萧萧的博客
08-30 1万+
在使用antdform表单的时候，肯定会使用到它里面的setFieldsValue【赋值】、getFieldsValue【获取值】，两个api，但是小编在使用的过程中遇到一个问题就是使用setFieldsValue赋值，有的时候并不能生效，后面小编查了下这个方法的说明，感觉是小编在初始化的时候赋值有点早了，后面小编在赋值的时候加了一个异步（setTimeout）就好使了。 具体有...
在react中对自己的组件使用setFieldsValue
热门推荐
qq_36990322的博客
07-29 2万+
setFieldsValue的用法 setFieldsValue是antd form的一个api，其作用是对指定的已使用from包裹的表单进行value设置。那么所以它的功能也很简单，那就是给指定的input设置value。 如下所示： import React from "react"; import { Form, Input } from 'antd'; class TestForm ex...
antd4 Form 更新字段 setFields 与 setFieldsValue 使用
Chennfengg222的博客
01-22 1万+
setFieldsValue setFieldsValue： 可以用于给表单设置一组字段 使用语法： // 参数为对象 this.formRef.current.setFieldsValue({ // '表单字段name': '需要设置的值', id: '4c6ee816-58c2-4700-b9fa-d19dfdc3c65d' }); setFields： 可以用于给表单设置一组字段， 并且可以设置表单项的状态以及错误信息 使用语法： 可以结合 getFieldsValue 来只给表单项设置错误状态
antd中的setFieldsValue
bl_ack233的博客
08-20 3890
antd中的setFieldsValuetags实时改变input中的值
详解React antd中setFieldsValu的简便使用
TianXuab的博客
08-27 2617
在上面的代码中，我们首先使用useState钩子创建了一个名为formData的状态变量，用于保存表单字段的值。总结一下，form.setFieldsValue是antd Form组件中的一个方法，用于动态设置表单字段的值。它接受一个对象作为参数，对象的键是表单字段的名称，值是要设置的字段值。它接受一个对象作为参数，对象的键是表单字段的名称，值是要设置的字段值。例如，假设我们有一个包含用户名和密码字段的表单，我们可以使用form.setFieldsValue方法来设置这些字段的值。
antd项目中input框的value值不能被修改，form.setFieldsValue 来动态改变表单值
qq_54455551的博客
03-31 4622
form.setFieldsValue来动态改变表单值，项目开发中input框输入的值无法动态修改
解决antd的Form组件setFieldsValue的警告问题
01-21
记住：setFieldsValue的字段要对应得上 解决antd的Form组件setFieldsValue的警告 使用antd的Form组件setFieldsValue可能会出现You cannot set a form field before rendering a field associated with the value.警告，字面意义去看是说在 render之前设置了表单值的问题。 解决 在使用setFieldsValue给表单Form的某一个filed赋值时，可能掺杂了非表单控件中的字段，Form表单在赋值和渲染时发现有些字段无法渲染在现有的字段（因为不存在），所以就会报出这
解决antd 表单设置默认值initialValue后验证失效的问题
01-21
方法一： getFieldDecorator没有第三个参数，如果写了3个参数就会出错 错误代码： <Form.Item> { getFieldDecorator('userName', { initialValue: 'Tom' },{ rules: [{ ...Input placeholder='\u8bf7\u8f93\u...
antd-DatePicker组件获取时间值,及相关设置方式
01-21
DatePicker组件默认语言是英语，需要设置为中文的话，需要安装moment。 import moment from “moment”; import “moment/locale/zh-cn” format属性，设置日期的格式，如“2020-02-28”。 设置日期 选择日期是...
在antd中setFieldsValue和defaultVal的用法
01-18
this.props.form.setFieldsValue({ phone: this.props.maintain.account.phone, email: this.props.maintain.account.email }); console.log(this.props.form.setFieldsValue); } 打印出来 function ...
antdv中的a-form表单赋值setFidesValue不生效
唐璜Taro的博客
09-14 3102
最近在修改一个管理系统项目（Vue + Antdv），在做数据回显时，发现部分字段回显失败，检查所有代码发现都没有问题。后来搜索后提示说初始化时候赋值可以过早了, 特此记录一下。2、另一个解决方法是：加上this.$nextTick(()=>{})即可。👨 作者简介：大家好，我是Taro，前端领域创作者。
ant design vue中的a-form表单赋值setFidesValue不生效
jadetii的学习地盘
07-20 1829
在做数据回显时，发现部分字段回显失败，检查所有代码发现都没有问题。后来发现是初始化时候赋值可以过早，ant design vue中的form。
为什么使用Form的ref.current.setFiledsValue()时不了值了?
weixin_39238520的博客
04-01 1901
问题描述：在第一次打开modal时，通过用实例ref设置的值是不生效的 如图，点击修改打开弹窗前，数据，使用的设值方法都是正确的。但是打开的弹窗值为空。 原因如图，经过断点之后，发现ref的实例为undefined，因为第一次使用modal时，此时还没渲染dom节点到dom中，没有实例是很正常的。至于后来的，但是第二次打开之后，可以发现，此时已经正常使用。 下图是第二次点击。 第二次点击结果如下图，可以看到此时是正常的。 解决：第一次使用ref实例，因为还没有dom节点，使用ref当然获取不到实例
autocomplete不起作用
qq_45803168的博客
12-17 2213
只有设置了name属性的输入框才会起作用。因为它是按照表单name进行存储，下次通过name寻找对应需要填充的值。自动完成允许浏览器预测对字段的输入。当用户在字段开始键入时，浏览器基于之前键入过的值，应该显示出在字段中填写的选项。但是不是所有控件都支持，支持一般只有文本类的表单控件。
对表单进行了双向绑定却`setFieldsValue`失败
weixin_30496751的博客
12-24 1919
标签: react, ant design组件 需求 管理后台，点击编辑对应的条目之后，弹出修改框，希望弹出框中预设条目中原来的值 enter description here 实现难点 对表单的输入框进行双向绑定之后使用setFieldsValue却只给了下面的赠送栏赋初始值，并且报错 Warning: Cannot use setFieldsValue until you ...
antd setfieldvalue设置单个值
最新发布
08-30
antd的setFieldValue函数是用于设置表单字段的值的方法。它接受两个参数，第一个参数是字段的名称或路径，第二个参数是要设置的值。 使用setFieldValue设置单个字段的值非常简单。首先，我们需要在组件的state中定义一个表单对象，以保存表单字段的值。然后在表单的onSubmit函数中使用setFieldValue来更新该字段的值。例如： ``` import React, { useState } from 'react'; import { Form, Input, Button } from 'antd'; const MyForm = () => { const [form] = Form.useForm(); const [formData, setFormData] = useState({}); const onSubmit = () => { const fieldValue = form.getFieldValue("fieldName"); // 获取当前值 setFormData({ ...formData, fieldName: fieldValue // 设置值 }); }; return ( <Form form={form}> <Form.Item name="fieldName"> <Input /> </Form.Item> <Button type="primary" onClick={onSubmit}> 提交 </Button> </Form> ); }; ``` 在上面的代码中，我们首先创建了一个表单对象form，并通过Form组件的form属性将其与当前表单进行关联。然后，我们使用useState来定义了一个formData对象来保存表单字段的值。 在onSubmit函数中，我们使用getFieldValue函数从form对象中获取到"fieldName"字段的当前值，并通过setFormData函数更新formData对象中的该字段的值。最后，我们在Button组件的onClick事件中调用onSubmit函数来触发表单提交。 通过以上方式，我们就可以使用antd的setFieldValue方法来设置单个表单字段的值了。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值