react的ui库antd中form表单使用SelectTree反显问题及解决

目录
  • react ui库antd中form表单使用SelectTree反显问题
    • 最近遇到这个问题,后来找到原因
  • react antd form表单回显踩坑
    • 需求如下
  • 总结

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>

总结

以上为个人经验,希望能给大家一个参考,也希望大家多多支持我们。

(0)

相关推荐

  • 关于react ant 组件 Select下拉框 值回显的问题

    目录 react ant组件Select下拉框值回显问题 情形 解决得问题 react ant-design Select组件下拉框map不显示 问题描述 问题总结 react ant组件Select下拉框值回显问题 情形 最近在处理react 页面的时候遇到了一个问题:使用ant 的table组件,里面的可编辑单元格类型,但是 我的数据 有一个下拉框在表格中,因为可编辑的table 组件默认单元格是 input输入框,所以下拉框根本就拿不到值,显示不上. 先说一下 下拉框 在表格 column

  • react使用antd表单赋值,用于修改弹框的操作

    1.使用getFieldDecorator的initialValue 2.在state里定义一个变量存表格的数据 3.给打开弹框的方法传个record 4.把表格里的值存到state 5.把在state里存的值传给弹框 6.获取传过来的值 7.在取消方法和修改成功后中给赋空值,要不然,点击添加的方法表单里面会有值 7.OK 补充知识:react中使用antd的表单重置数据 resetFields 重置一组输入控件的值(为 initialValue)与状态,如不传入参数,则重置所有组件 Funct

  • react antd实现动态增减表单

    之前写动态表单遇到过坑,就是用index下标做key会导致bug,而且很严重! 今天有空写下文章记录下:怎么处理和逻辑 我用的是antd3的版本,3和4的表单有点不一样,不过差别应该不大. 需求: 1.选择类型切换展示固定的模板 2.通过新增字段可以动态增减表单里面的每一行 3.控制每一行的字段是否需要必填 4.编辑时候回填参数 效果图: 部分关键代码: import React, { Component } from 'react'; import styles from './index.l

  • vue+elementui(对话框中form表单的reset问题)

    目录 对话框中form表单的reset问题 解决原理 解决办法 element UI form表单重置无效 实例化是 说下解决 对话框中form表单的reset问题 一般在新增和编辑的时候用的都是同一个对话框和form表单,而在先点击编辑的时候form表单的resetfileds函数就会失效 解决原理 实际上结构是(通过vue类比) data里面有一个form表单的初始值, methods里面定义了一个resetfileds的函数 resetfileds函数的作用:记录在mounted生命周期执

  • mvc中form表单提交的三种方式(推荐)

    第一种方式:submit 按钮 提交 <form action="MyDemand" method="post"> <span>关键字:</span> <input name="keywords" type="text" value="@keywords" /> <input type="submit" value="搜索&

  • JavaScript中Form表单技术汇总(推荐)

    这里不进行很复杂的后台验证以及JavaScript的正则表达式,只是简单的介绍下这个技术,简单的后台接收与跳转,大概了解怎么验证的就可以.具体的技术,我后面还会继续写博客的.本人也还在学习中. 表单验证1-简单验证 进行简单的验证,用户名必须为abcd,密码长度必须大于等于6 然后根据用户输入的数据,在后面给出提示. 代码演示: <html> <head> <title>DHTML技术演示---表单验证</title> <meta http-equiv

  • 微信小程序中form 表单提交和取值实例详解

    微信小程序中form 表单提交和取值实例详解 我们知道,如果我们直接给 input 添加 bindinput,比如:<input bindinput="onUsernameInput" />,那么可以在 onUsernameInput 中直接使用 e.detail.value,即: onUsernameInput : function(e) { e.detail.value; } 但是,如果有多个输入控件,我们不可能为每个控件添加 bindinput.bindchange

  • 解决django中form表单设置action后无法回到原页面的问题

    django中form表单设置action后,点提交按钮是跳转到action页面的,比如设置action为login,网址为192.168.1.128,跳转后便会来到192.168.1.128/login,F5刷新也会是重新提交表单对话框,无法回到原页面. 因此就要在django服务器进行重定向,具体就是 from django.shortcuts import redirect #最后返回原页面 return redirect(url) 补充知识:Django + Ajax发送POST表单,并

  • ASP.NET中Form表单不可以嵌套使用

    我非常确定在ASP 中是可以有多个form 表单的,以前常常这样干的,在后台分类管理页面中,把添加和修改放在同一个页面,这样就需要用到两个 form 表单进行提交服务器代码处理. 经过测试,在ASP.NET 也是可以一个页面有多个form 表单的,例如下面的代码: <form id="form1"></form><form id="form2"></form><form id="form3"&

  • jquery插件EasyUI中form表单提交实例分享

    之前用AJax给Controller传递参数,然后再调用服务端的方法对数据库进行更改,今天碰到一个新的方法,就是表单的提交,这样可以省去AJax传参. 当表单提交后,我们可以获取表单上控件中的值,然后再调用服务端的方法对数据库进行更改.下面的一张截图是具体的业务需求. 一.要实现的功能:从上面这个表单中,获取控件中的值,然后传递给后台.下面是表单代码. 二.表单代码 <div id="Editwin" class="easyui-window" title=&

  • 解决Extjs4中form表单提交后无法进入success函数问题

    1.首先得确定json格式没问题 2.在返回的json中一定得加上success为true,因为只有为true,才会进入success函数 因为刚结束Extjs4,这个错误我调试了半天.

  • 仿ElementUI实现一个Form表单的实现代码

    使用组件就像流水线上的工人:设计组件就像设计流水线的人,设计好了给工人使用. 完整项目地址:仿 ElementtUI 实现一个 Form 表单 一. 目标 仿 ElementUI 实现一个简单的 Form 表单,主要实现以下四点: Form FormItem Input 表单验证 我们先看一下 ElementUI 中 Form 表单的基本用法 <el-form :model="ruleForm" :rules="rules" ref="loginFo

  • mvc form表单提交的几种形式整理总结

    mvc中form表单提交的几种形式 第一种方式:submit 按钮 提交 <form action="MyDemand" method="post"> <span>关键字:</span> <input name="keywords" type="text" value="@keywords" /> <input type="submit&quo

随机推荐

其他