react 表单组件 异步渲染,值不会生效,需要手动改变对应组件的显示值
楼主遇到这个问题已经是第二次,上次我们项目经理给帮忙解决了一次,这次又遇到了,刚开始不知道是这个问题,上次做的笔记也没找到了,估计又忘记了,这里抽三分钟记录一下,
当然这里这样做有个前提:就是你已经和后台交互成功了,不然当测试全局刷新界面时,可能会出问题哟!(要根本上解决该问题,应该是在封装的ajax请求哪里在返回一个data,参见后面的eg:
return data;
)
如果不设置如图一

如图二 才是想要的效果展示

this.props.form.setFieldsValue({searchAt: '1'});
this.props.form.setFieldsValue({searchFrom: '1'});
//或者
{
title: '修改',
key: 'update',
render: (text, record, index) => <Icon type="edit" onClick={() => {
this.props.form.setFieldsValue({name: record.name});
this.showModal(`${record.id}`)
}}/>
},
//修改一条数据
async updataRoom(value) {
const {data} = await request(
{
method: 'put',
url: '/api/room',
data: value
},
{message: '保存成功'},
{message: '保存失败'},
);
this.setRoom(data);
return data;
}
react 表单组件 异步渲染,值不会生效,需要手动改变对应组件的显示值的更多相关文章
- 通过html()的方法获取文本内容, form表单组件显示的值与获取到的值不一致的问题
我在通过 html()获取对应节点的内容,发现一个问题,获取到的 form表单组件的内容值是初始加载的值,而不是经过用户修改后的值.例如页面加载时组件<input type="text ...
- React表单组件自定义-可控及不可控组件
一.可控组件 <!DOCTYPE html> <html lang="zh-cn"> <head> <meta charset=" ...
- reactjs入门到实战(八)----表单组件的使用
表单组件支持几个受用户交互影响的属性: value,用于 <input>.<textarea> 组件. checked,用于类型为 checkbox 或者 radio 的 &l ...
- ReactJS实用技巧(2):从新人大坑——表单组件来看State
不太清楚有多少初学React的同学和博主当时一样,在看完React的生命周期.数据流之后觉得已经上手了,甩开文档啪啪啪的开始敲了起来.结果...居然被一个input标签给教做人了. 故事是这样的:首先 ...
- 如何实现Ant design表单组件封装?
目标:自己实现一个antd表单组件 先看下Ant Design官网上给出的表单组件用法: import React, { Component } from 'react' import { Form, ...
- django基础之day09,创建一个forms表单组件进行表单校验,知识点:error_messages,label,required,invalid,局部钩子函数,全局钩子函数, forms_obj.cleaned_data,forms_obj.errors,locals(), {{ forms.label }}:{{ forms }},{{ forms.errors.0 }}
利用forms表单组件进行表单校验,完成用户名,密码,确认密码,邮箱功能的校验 该作业包含了下面的知识点: error_messages,label,required,invalid,局部钩子函数,全 ...
- 【form】 表单组件说明
form表单组件 1)将form组件内的用户输入的<switch/> <input/> <checkbox/> <slider/> <radio/ ...
- 使用iview 的表单组件验证 Upload 组件
使用iview 的表单组件验证 Upload 组件 结果: 点击提交按钮, 没有填的form 项, 提示错误, 当填入数据后提示验证成功 代码: <template> <div id ...
- 文档驱动 —— 表单组件(五):基于Ant Design Vue 的表单控件的demo,再也不需要写代码了。
源码 https://github.com/naturefwvue/nf-vue3-ant 特点 只需要更改meta,既可以切换表单 可以统一修改样式,统一升级,以最小的代价,应对UI的升级.切换,应 ...
随机推荐
- @JsonSerialize @JsonIgnoreProperties @JsonIgnore @JsonFormat
@JsonIgnoreProperties 此注解是类注解,作用是json序列化时将java bean中的一些属性忽略掉,序列化和反序列化都受影响. @JsonIgnore 此注解用于属性或者方法上( ...
- Python爬虫:BeautifulSoup用法总结
原文 BeautifulSoup是一个解析HTML或XML文件的第三方库.HTML或XML文件可以用DOM模型解释.一般包含三种节点: 元素节点 - 通常指HTML 或 XML的标签 文本节点 - 标 ...
- BigDecimal计算
货币金额的计算 - Java中的BigDecimal 在<Effective Java>这本书中也提到这个原则,float和double只能用来做科学计算或者是工程计算,在商业计算中我 ...
- IDEA控制台中文乱码解决
关于IDEA中文乱码的解决方法,如下. 1.打开idea安装目录,选择 打开文件,末尾添加-Dfile.encoding=UTF-8 2.打开IntelliJ IDEA>File>Sett ...
- Laravel Model updating&updated 事件使用注意事项
1 触发条件 1.1 updating 1.1.1 如果字段无变化,不会触发此事件. 1.1.2 除非更改至少一个字段的值 2 事件逻辑不会覆盖 2.1 Trait 中定义事件如下 /** * The ...
- (WAWAWAWAWAWAW) G. Periodic RMQ Problem
没有联通门 : Codeforces G. Periodic RMQ Problem /* Codeforces G. Periodic RMQ Problem MMP 什么动态开点线段树啊 ... ...
- 二分算法题目训练(二)——Exams详解
CodeForces732D——Exams 详解 Exam 题目描述(google翻译) Vasiliy的考试期限将持续n天.他必须通过m门科目的考试.受试者编号为1至m. 大约每天我们都知道当天可以 ...
- Java把多个list 合并成一个并去重
开发过程中遇到一个合并去重问题,任务完成后,总结出来一个比较简单的方法.对于List中不同类型的数据,需要采用不同的处理方式.List中如果是基础数据类型,直接合并去重即可:如果是对象类 ...
- [WEB安全]Weblogic漏洞总结
0x01 Weblogic简介 1.1 叙述 Weblogic是美国Oracle公司出品的一个应用服务器(application server),确切的说是一个基于Java EE架构的中间件,是用于开 ...
- 查看日志tail命令
打开终端,连接jboss: 命令: tail -f -n 500 /var/log/wildfly/wrapper.log