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的升级.切换,应 ...
随机推荐
- redis中对list类型某个元素的查找和删除
我们的信息都是放到redis的缓存中,结构为list,如果知道特定的值的话,通过LREM key count value这样就可以.对于redis的list结构,获取某个位置的值通过 LINDE ...
- 2015浙工大校赛-Problem C: 三角—— 费马大定理+勾股数
题目 有一个直角三角形三边为 A,B,C 三个整数.已知 C 为最长边长,求一组B,C,使得B和C最接近. (题目链接) 分析 打表找规律. 或者直接一点的枚举 $C-B$ 的值.(既然枚举 B 不现 ...
- docker学习(六) Docker命令查询
Docker命令查询 1.基本语法docker [OPTIONS] COMMAND [arg...]一般来说,Docker 命令可以用来管理 daemon,或者通过 CLI 命令管理镜像和容器.可以通 ...
- 后台(一)vue+element-ui(全局配置)
vue init webpack 项目名称 npm install axios //先安装! npm install --save axios vue-ax ...
- 内存原理与PHP的执行过程
一.内存结构 栈区:保存的是变量名(术语:引用),对于cpu来说,读写速度很快 堆区:存储“复杂”的数据,数组.对象.字符串(字符串比较特殊)等 数据段:又分为数据段全局区(用于存储简单的数据,如数字 ...
- webpack 性能优化小结
背景 如今前端工程化的概念早已经深入人心,选择一款合适的编译和资源管理工具已经成为了所有前端工程中的标配,而在诸多的构建工具中,webpack以其丰富的功能和灵活的配置而深受业内吹捧,逐步取代了gru ...
- 时隔五年,Scrapyd 终于原生支持 basic auth
Issue in 2014 scrapy/scrapyd/issues/43 Pull request in 2019 scrapy/scrapyd/pull/326 试用 1. 安装: pip in ...
- mysql my.cnf文件
一.mysqld组值设置: 1.user = mysql #启动mysql的用户.2.pid-file = /var/run/mysqld/mysqld.pid #指定pid文件.3.socket = ...
- Windows下OpenFOAM开发及使用环境配置指南 (1)【转载】
转载自:http://openfoam.blog.sohu.com/158614863.html *************************************************** ...
- Java判断整数溢出
开题报告第一版写完发给老师了,熬了两周终于搞出来了,等着被怼了之后再改吧.晚上选了Leetcode一道简单的题,整数反转,就是将一个int类型的数反转.原本确实很简单,最后出现个问题有意思--整数溢出 ...