react的ui库antd中form表单使用SelectTree反显问题及解决
react ui库antd中form表单使用SelectTree反显问题
最近遇到这个问题,后来找到原因
1.formItem 需要使用initialValue赋值。
2.这个组件需要一开始就存在不能是条件渲染,非要用条件渲染需要让它先显示,然后根据条件让它不显示。
例子:
state={ treeList:[], showTree:ture, value:[] } componentDidMount(){ //这里请求数据用定时器代替 setTimeOut(()=>{ //一般会先拿到listTree先渲染 this.setState({ treeList:[{value:'aaa',title:'你好react'}] }) setTimeOut(()=>{ //第二次请求反显的值和是否显示 if(需要显示tree){ //下面俩条if一般不会有同时出现的时候 this.setState({ value:['aaa'], }) } if(不需要显示tree){ this.setState({ showTree:false, }) } }) },2000) } render() { const {treeList,value,showTree}=this.state; const tProps = { treeData:treeList, value:value }; return <Form> <Form.Item> {getFieldDecorator('selectTree', { initialValue:[] })( {showTree&&<TreeSelect {...tProps} />} )} </Form.Item> </Form> }
react antd form表单回显踩坑
需求如下
在弹窗里显示一个表单,并进行回显,涉及到的组件有,简单的input框,inputNumber框,select,此处前端懒得让后端写接口点击自己获取到form表单里的数据,方法也不难 在链接处添加点击事件 代码如下(简单记录)
onClick={() => this.getInformation(info)} //此处是点击事件的方法 getInformation = (info) => { //此处打印的东西见下图 //此处存在问题如果强制转换了一次重复转换会报错 参数undefined if ( typeof info.app == "string" && typeof info.file == "string" ) { console.log(info); //把select多选的类型强制转成object类型并且赋值给原来的属性 var newObj1 = eval('('+info.app+')'); var newObj = eval('('+info.file+')'); info.file=newObj info.app=newObj1 store.getInformation(); //储存到当前state中 this.setState({getInform:info}) }else{ this.setState({getInform:info}) } }; //此处通过组件通信暴露给父组件 <Get putfile={this.state.getInform}/> //父组件处接收参数 在render函数处接收 const form = this.props["putfile"];
此处为上面log打印的东西
打印的数据格式都是string类型的,对于select的多选string类型的属性当然不满足了,所以需要进行数据处理
//此处添加了 回显实例 此代码antd版本为 3 必填校验已经实现直接cv即可 //此处为input框 <Form.Item label="应用名称" // hasFeedback required > {getFieldDecorator( "name", { initialValue: form["name"] }, { rules: [{ required: true, message: "请输入应用名称!" }], } )(<Input placeholder="请输入应用名称" />)} </Form.Item> // 此处为number框 <Form.Item label="金额" required> {getFieldDecorator( "money", { initialValue: form["money"] }, { rules: [{ required: true, message: "请输入应用上架金额!" }], } )( <InputNumber style={{ width: "100%" }} min="0" step="1" precision="2" placeholder="请输入应用上架金额" /> )} </Form.Item> // 此处为select多选框 (此处未做必填校验) <Col span={12}> <Form.Item label="文件类型" hasFeedback validateStatus=""> {getFieldDecorator("file", { initialValue: form["file"], })( <Select mode="tags" style={{ width: "100%" }} placeholder="请选择文件类型" onChange={this.handleChange} > {children} </Select> )} </Form.Item> </Col>
总结
以上为个人经验,希望能给大家一个参考,也希望大家多多支持猪先飞。
原文出处:https://blog.csdn.net/weixin_37619109/article/details/895287
相关文章
- 本篇文章是对C#中WinForm控件之Dock顺序调整进行了详细的分析介绍,需要的朋友参考下...2020-06-25
关于React Native报Cannot initialize a parameter of type'NSArray<id<RCTBridgeModule>>错误(解决方案)
这篇文章主要介绍了关于React Native报Cannot initialize a parameter of type'NSArray<id<RCTBridgeModule>>错误,本文给大家分享解决方案,需要的朋友可以参考下...2021-05-12- 这篇文章主要介绍了解决Antd Table表头加Icon和气泡提示的坑,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧...2020-11-17
- 这篇文章主要介绍了c#从数据库里取得数据并异步更新ui的方法,大家参考使用吧...2020-06-25
No module named ‘win32gui‘ 的解决方法(踩坑之旅)
这篇文章主要介绍了No module named ‘win32gui‘ 的解决方法(踩坑之旅),文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧...2021-02-18- 这篇文章主要介绍了解决vant-UI库修改样式无效的问题,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧...2020-11-03
- 这篇文章主要介绍了C# Winform中实现主窗口打开登录窗口关闭的方法,这在需要用户名密码的软件项目中是必用的一个技巧,要的朋友可以参考下...2020-06-25
antd Form组件方法getFieldsValue获取自定义组件的值操作
这篇文章主要介绍了antd Form组件方法getFieldsValue获取自定义组件的值操作,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧...2020-10-29- 下面小编就为大家带来一篇C# winform打开Excel文档的方法总结(必看篇)。小编觉得挺不错的,现在就分享给大家,也给大家做个参考。一起跟随小编过来看看吧...2020-06-25
- 这篇文章主要为大家详细介绍了vue+element ui实现锚点定位,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下...2021-06-29
- 这篇文章主要介绍了React使用高德地图的实现示例(react-amap),文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧...2021-04-18
- 这篇文章主要给大家介绍C# winform快捷键设置技巧,涉及到C winform快捷键相关知识,对C winform知识感兴趣的朋友可以参考下本篇文章...2020-06-25
React引入antd-mobile+postcss搭建移动端
本文给大家分享React引入antd-mobile+postcss搭建移动端的详细流程,文末给大家分享我的一些经验记录使用antd-mobile时发现我之前配置的postcss失效了,防止大家踩坑,特此把解决方案分享到脚本之家平台,需要的朋友参考下吧...2021-06-21c#中Winform实现多线程异步更新UI(进度及状态信息)
本篇文章主要介绍了c#中Winform实现多线程异步更新UI(进度及状态信息) ,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧...2020-06-25使用 React 和 Threejs 创建一个VR全景项目的过程详解
这篇文章主要介绍了使用 React 和 Threejs 创建一个VR全景项目的过程详解,本文通过实例代码给大家介绍的非常详细,对大家的学习或工作具有一定的参考借鉴价值,需要的朋友可以参考下...2021-04-06- 这篇文章主要介绍了C#实现windows form限制文本框输入的方法,涉及C#限制文本框输入的技巧,非常具有实用价值,需要的朋友可以参考下...2020-06-25
- 由于业务需要,要求实现树形菜单,且菜单数据由后台返回,下面这篇文章主要给大家介绍了关于js如何构造elementUI树状菜单的数据结构的相关资料,需要的朋友可以参考下...2021-05-13
- 这篇文章主要为大家详细介绍了easyUI下拉列表点击事件的使用方法,具有一定的参考价值,感兴趣的小伙伴们可以参考一下...2017-05-22
详解element-ui 表单校验 Rules 配置 常用黑科技
这篇文章主要介绍了element-ui 表单校验 Rules 配置 常用黑科技,本文通过实例代码给大家介绍的非常详细,对大家的学习或工作具有一定的参考借鉴价值,需要的朋友可以参考下...2020-07-11- 这篇文章主要介绍了angularjs $http实现form表单提交示例,非常具有实用价值,需要的朋友可以参考下 ...2017-06-15