react 使用Form组件如何清空上一次操作
最近在做一个表单联查时候,总是会发现后一个选择器会记住上一次选择的值 ,这会导致前一级选择器已经做出更新后,后一级选择器却还记住上一次的操作,

这里有个方法可以在上级选择器事件操作时清空Form组件的记录
this.props.form.resetFields();
整个表单事件
companyChange(value){
console.log("companyChange--",value);
this.props.form.resetFields(); //<------就是加在这里
let shopsListShopId = {}
shopsListShopId.companyid = value;
this.setState({
shopsListShopId: shopsListShopId,
},this.shopsList)
},
<Form layout="inline" onSubmit={this.handleSubmit} autoComplete="off">
<FormItem>
{
getFieldDecorator('product_name')(
<Input placeholder="请商品输入名称" />
)
}
</FormItem>
<FormItem>
{
getFieldDecorator('companyid',{
initialValue: this.state.param && this.state.param.companyid || '',
})(
<Select style={{ width: '120px' }}
onChange={this.companyChange}
>
<Option value=""> --公司名称-- </Option>
{
this.state.tableCompanyName && this.state.tableCompanyName.map((item,index) => {
return (
<Option key={item.id} value={item.id}> {item.title}</Option>
)
})
}
</Select>
)
}
</FormItem>
<FormItem>
{
getFieldDecorator('shopid',{
initialValue: this.state.shopid && this.state.shopid ||'',
})(
<Select style={{ width: '120px' }} >
<Option value=""> --门店名称-- </Option>
{
this.state.shopsList && this.state.shopsList.map((item,index) => {
return (
<Option key={item.id} value={item.id}> {item.title}</Option>
)
})
}
</Select>
)
}
</FormItem>
<Button type="primary" htmlType="submit">查询</Button>
<Button type="primary" onClick={this.addOrUpdate.bind(this,'')}>添加</Button>
{/*<Button onClick={this.handleReset}>重置</Button>*/}
</Form>
react 使用Form组件如何清空上一次操作的更多相关文章
- Django 使用form组件对文件上传
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...
- NuGet 本地服务器 公司组件库搭建 上传下载操作 模块化灵活设计
新年第一更,关于如何搭建NuGet的本地服务器,以及部署IIS,以此搭建公司自己的组件仓库,方便所有的组件更新,管理,测试等等操作. 关于如何在NuGet中下载指定的组件,参考这篇文章:http:// ...
- Web框架django[Form]组件
新手上路 Django的Form主要具有一下几大功能: 生成HTML标签 验证用户数据(显示错误信息) HTML Form提交保留上次提交数据 初始化页面显示内容 小试牛刀 1.创建Form类 # 创 ...
- 小而美的 React Form 组件
背景 之间在一篇介绍过 Table 组件< React 实现一个漂亮的 Table > 的文章中讲到过,在企业级后台产品中,用的最多且复杂的组件主要包括 Table.Form.Chart, ...
- django Form组件 上传文件
上传文件 注意:FORM表单提交文件要有一个参数enctype="multipart/form-data" 普通上传: urls: url(r'^f1/',views.f1), u ...
- React Native 获取组件(Component)在屏幕上的位置
年后主客户端的需求以及老的业务迁移RN,现在疯狂的在学RN.在迁移需求的时候遇到需要获取组件在屏幕上的绝对位置.页面如下: 就需要展开的时候获取sectionHeader(默认排序)在屏幕上的具体位置 ...
- React Native常用组件在Android和IOS上的不同
React Native常用组件在Android和IOS上的不同 一.Text组件在两个平台上的不同表现 1.1 height与fontSize 1.1.1只指定font,不指定height 在这种情 ...
- React利用Antd的Form组件实现表单功能(转载)
一.构造组件 1.表单一定会包含表单域,表单域可以是输入控件,标准表单域,标签,下拉菜单,文本域等. 这里先引用了封装的表单域 <Form.Item /> 2.使用Form.create处 ...
- day75 form 组件(对form表单进行输入值校验的一种方式)
我们的组件是什么呢 select distinct(id,title,price) from book ORM: model.py class Book(): title=model.CharFiel ...
随机推荐
- 《Cracking the Coding Interview》——第11章:排序和搜索——题目7
2014-03-21 22:05 题目:给你N个盒子堆成一座塔,要求下面盒子的长和宽都要严格大于上面的.问最多能堆多少个盒子? 解法1:O(n^2)的动态规划解决.其实是最长递增子序列问题,所以也可以 ...
- 《Cracking the Coding Interview》——第9章:递归和动态规划——题目1
2014-03-20 02:55 题目:小朋友跳台阶,每次跳1层或2层,那么跳N层总共有多少种跳法. 解法:斐波那契数列. 代码: // 9.1 A child can run up the stai ...
- redhat 安装python3
一.首先,官网下载python3的所需版本. wget https://www.python.org/ftp/python/3.6.0/Python-3.6.0.tgz 想下载到那个文件夹下就先进入到 ...
- android瀑布流照片墙实现代码详解
照片墙的实现,是需要往手机里面添加很多图片的,如果没有对资源进行合理的释放,程序很快就会出现OOM.所以需要用到LruCache算法来缓存图片. 1,首先是图片资源类,这个类中包含了很多图片链接. p ...
- js文字效果
<!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title&g ...
- 用jQuery实现旋转木马效果(带前后按钮和索引按钮)
项目中要用到旋转木马效果,一共5张图片轮播,并且点击对应的索引按钮能切换到对应的图片.本效果实在jquery.carousel.js插件的基础上做了一些改进,以实现上述需求. 效果图如下: 代码: H ...
- <转自原博客> NOIP2008 传纸条
小渊和小轩是好朋友也是同班同学,他们在一起总有谈不完的话题.一次素质拓展活动中,班上同学安排做成一个m行n列的矩阵,而小渊和小轩被安排在矩阵对角线的两端,因此,他们就无法直接交谈了.幸运的是,他们可以 ...
- codeforces 834 D. The Bakery
codeforces 834 D. The Bakery(dp + 线段树优化) 题意: 给一个长度为n的序列分成k段,每段的值为这一段不同数字的个数,最大化划分k端的值 $n <= 35000 ...
- BZOJ4894 天赋 【矩阵树定理】
题目链接 BZOJ4894 题解 双倍经验P5297 题解 #include<iostream> #include<cstring> #include<cstdio> ...
- 牛客 2018NOIP 模你赛2 T2 分糖果 解题报告
分糖果 链接:https://www.nowcoder.com/acm/contest/173/B 来源:牛客网 题目描述 \(N\) 个小朋友围成一圈,你有无穷个糖果,想把其中一些分给他们. 从某个 ...