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

目录
  • react ant组件Select下拉框值回显问题
    • 情形
    • 解决得问题
  • react ant-design Select组件下拉框map不显示
    • 问题描述
    • 问题总结

react ant组件Select下拉框值回显问题

情形

最近在处理react 页面的时候遇到了一个问题:使用ant 的table组件,里面的可编辑单元格类型,但是 我的数据 有一个下拉框在表格中,因为可编辑的table 组件默认单元格是 input输入框,所以下拉框根本就拿不到值,显示不上。

先说一下 下拉框 在表格 column 的写法:

{
                title: '数据来源',
                dataIndex: 'dataSource',
                key: 'dataSource',
                render: (text, record, idx) => {
                    return (

                            <Select
                                style={{ width: 200 }}
                                id="dataSource"
                                onChange={this.changeSource.bind(text,record,idx)}
                                value={record.dataSource}
                            >
                                {this.state.itemsValue.map(item => (
                                    <Option key={item.seKey}>{item.seValue}</Option>
                                ))}

                            </Select>
                    )
                },
                width: 300,
                editable: false
},

主要是reade 的写法,官方api上上这么描述的,

 render            Function(text, record, index) {}

生成复杂数据的渲染函数,参数分别为当前行的值,当前行数据,行索引,@return 里面可以设置表格行/列合并

代码中: this.state.itemsValue 是下拉框的所有数据,value  是 下次进入页面需要 回显的值,为了这个回显的值,我忙活了近倆小时。

解决得问题

第一个问题:下拉框的回显

因为要回显的数据 在arry<Object> 里,而且有childern 项,我先想着怎么循环拿出来,赋给value,但是均未成功,最后灵光一现。我发现了问题的所在,每条数据在table显示的时候已经循环过了,问题就在我能不能拿到当前行的数据, 能拿到就能拿到当前改下拉框的值,翻一翻api 就什么都有了。record 就是当前的数据对象,直接点 属性就是值。

第二个问题:

下拉框选中值后如何在 可编辑的表格上显示:

官方的可编辑单元格的保存你输入的数据到表格的方法是这样的:

handleSave = row => {
    const newData = [...this.state.dataSource];
    const index = newData.findIndex(item => row.key === item.key);
    const item = newData[index];
    newData.splice(index, 1, {
      ...item,
      ...row,
    });
    this.setState({ dataSource: newData });
  };

其中,row是你输入数据的那行数据,newData 是表格中所有数据,数组.findIndex ( =()=>{ }) 方法是当其中匿名箭头函数的方法返回true 的时候返回已选数据在 newData数组的下标,(如果没找到返回的-1),

拿到对应下标后,删除源数据newData下标的数据,然后把row加进来,也就是用已经改变的row替换之前数据的item,也就是splice ()方法的作用,

3个参数分别是index,要删除/添加的下标,1,删除的个数,{} 在下标位置增加的数据、

最后把修完的数据返回state,页面重新渲染,把数据显示在表格上。(每改一次,触发onChange事件,渲染一次。。。)

这个方法对于输入框 是一点问题没有,但是下拉框就不行了,因为row对象拿不到你选得数据,input是value属性,但是下拉框是option 标签,所以即便你怎么选下拉框一直是空。怎么办,勤劳的人总会有收获,这时我想到 @wslzjr 帅帅博主对我的鼓励:

我感觉瞬间充满了力量,没什么是加班解决不了的,如果有,那就班加的不够。 我的想法是这样的,对于下拉框,我自己拿值,自己替换数据,然后让页面重新渲染,不走官方的方法不就行了。于是我自己写了一套,

 changeSource =(t,e,r) =>{
        //设置数据的值,用this.setState({})
        let row = t;
        const {
            fieldName,
            fieldDesc,
            dataType,
            fieldLength,
            dataSource,
            fieldValue,
            required,
            validRule

        } = row;
        row.dataSource=r;
        let { rootNodesMap } = this.state;
        Object.assign(rootNodesMap[row.id], row);
        this.setState({ rootNodes: this.state.rootNodes });
        this.updateDataSource(this.state.rootNodes);
    }

其中,t 是当前的哪行数据 ,e 当前行数据,r,行索引,  assign 是对象属性的同级拷贝方法,他无法深层次拷贝,但是我够用了。Object.assign方法用来将源对象(source)的所有可枚举属性,复制到目标对象(target)。它至少需要两个对象作为参数,第一个参数是目标对象,后面的参数都是源对象。  这样表格的下拉框就有数据了。

react ant-design Select组件下拉框map不显示

问题描述

在使用Select Option下拉组件时,map遍历后不显示下拉框

错误写法:

{dataList && dataList.map(item =>{(
<Option key={item.id} value={item.value}>{item.value}</Option
)})}

正确写法:

{dataList && dataList.map(item =>(
<Option key={item.id} value={item.value}>{item.value}</Option
))}

问题总结

主要是es6箭头函数写法的问题,当需要在嵌套中写入HTML代码时,箭头函数后边不需要加大括号{},直接用小括号()即可

在render()函数内使用大括号{}会识别成函数从而不会渲染到页面上,小括号内的内容会识别成代码块正常渲染

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

(0)

相关推荐

  • React如何利用Antd的Form组件实现表单功能详解

    一.构造组件 1.表单一定会包含表单域,表单域可以是输入控件,标准表单域,标签,下拉菜单,文本域等. 这里先引用了封装的表单域 <Form.Item /> 2.使用Form.create处理后的表单具有自动收集数据并校验的功能,但如果不需要这个功能,或者默认的行为无法满足业务需求,可以选择不使用Form.create并自行处理数据 经过Form.create()包装过的组件会自带this.props.form属性,this.props.form提供了很多API来处理数据,如getFieldDe

  • react写一个select组件的实现代码

    之前一直用的antd的Select组件,但在有些端并不适用,而原生的select样式修改不灵活,遂产生自己写一个组件的想法.观察select组件: <select onChange={(value) => {this.value=value}} <option value='1'>man</option> <option value='0'>woman</option> </select> 可以看出数据都是在option中,有值val

  • React封装CustomSelect组件思路详解

    目录 思路和前提 编码与实现 处理createContext与useContext 对content的封装和拆分: DispatchRender, Controls 先说Controls, 包含控制行: 重置, 确定 DispatchRender 用于根据type分发对应的render子组件,这是一种编程思想,在次可以保证父子很大程度的解耦,再往下子组件不再考虑type是什么,父组件不需要考虑子组件有什么. 单选框的render子组件的具体实现 由来: 需要封装一个通过Popover弹出框里可以

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

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

  • 解决element ui select下拉框不回显数据问题的解决

    最近在做一个项目,项目的后端是地址: https://github.com/wangyuanjun008/wyj-springboot-security.git 前端地址是 https://github.com/wangyuanjun008/wyj-vue-security.git ,使用的前端语言是vue,使用webpack构建vue-cli全家桶 在项目中用到 el-select 时遇到一个问题,就是在编辑表单时,下拉框的不显示数据,前台代码如下: <el-select v-model=&quo

  • 微信小程序 select 下拉框组件功能

    一.源码地址 https://github.com/imxiaoer/WeChatMiniSelect 二.效果图 录屏图片质量较差,所以大家会看到残影(捂脸) 三.组件源码 1. select.wxml <view class="select-box"> <view class="select-current" catchtap="openClose"> <text class="current-name

  • react+antd select下拉框实现模糊搜索匹配的示例代码

    我们在开发过程中,经常会出现下拉框数据很多得情况,这个时候客户一个个得找就很浪费时间,那该怎么办呢? 我们可以实现一边输入一遍模糊匹配. 实现后的效果是 具体代码实现请看下面: 我们可以在Select.Option 里面返回我们想要搜索得字段,然后通过filterOption这个属性去获取和操作. 到此这篇关于react+antd select下拉框实现模糊搜索匹配的示例代码的文章就介绍到这了,更多相关react antd select模糊搜索内容请搜索我们以前的文章或继续浏览下面的相关文章希望

  • antd的select下拉框因为数据量太大造成卡顿的解决方式

    相信用过antd的同学基本都用过select下拉框了,这个组件数据量少的时候很好用,但是当数据量大的时候,比如大几百条上千条甚至是几千条的时候就感觉一点都不好用了,卡的我怀疑人生,一点用户体验都没有了. 当然这不是我想去优化它的动力,主要是公司业务人员和后端的同事也无法忍受,于是我只能屈从于他们的淫威.... 想要优化肯定要知道为什么会卡,初步判断就是数据量过大导致渲染option组件的时间过长导致卡顿,于是想要不卡只能限制渲染的数据数量. 我的想法是这样的:任何时候都只渲染前100条数据以保证

  • 浅谈Vue Element中Select下拉框选取值的问题

    之前写了.一个原生的select的,因为展示效果原因,给删除掉了,忘记保存代码了,现在大家展示使用elementUI的下拉框封装一个组件,供咱们项目中经常调用,减少代码量. html: <el-select v-model="ite" placeholder="请选择" value-key="mateGroup"> <el-option style="width: auto" :disabled="

  • 完美解决iview 的select下拉框选项错位的问题

    在使用iview的过程中,我遇到这样一个问题,在Model中使用select下拉框组件.但是当弹出框超过一屏需要滚动时,select的下拉选项会出现错位(下图1为正常,图2为滚动后,下拉选项错位.) 图1: 图2: 在分析组件代码后,发现以下一个样式: .ivu-modal .ivu-select-dropdown { position: absolute !important; } 解决方案 正是这个样式影响了下拉框的定位,解决的方式是覆盖作者的原来样式. 但是,很不巧的是,作者加了一个 !i

  • 在element-ui的select下拉框加上滚动加载

    在项目中,我们需要运用到很多来自后端返回的数据.有时是上百条,有时甚至上千条.如果加上后端的多表查询或者数据量过大,这就导致在前端的显示就会及其慢,特别是在网络不好的时候更是如此. 自然,后端就做了一项非常"漂亮"的交互体验数据--分页 这不分页还好,一分页对超过10条数据之后的本来也不多,就20条,偏偏还得做个分页器.(假设为10条) 此时,如果能够像购物商城那样拖拽到底部自动加载新数据就好了. 于是<在element-ui的select下拉框加上滚动加载>诞生了. 这里

  • Vue.js仿Select下拉框效果

    本文实例为大家分享了Vue.js仿Select下拉框效果的具体代码,供大家参考,具体内容如下 废话少说,直接上图上代码: 效果图: HEML: <div id="demo"> <h2 class="title">自定义下拉框</h2> <imitate-select h2-value="第一个 Select" v-bind:list="list1"></imitate-se

  • 关于element-ui select 下拉框位置错乱问题解决

    目录 element-ui select 下拉框位置错乱 element-ui使用时的一些坑点总结 1.el-select 下拉框绑定值为对象时选中值显示错乱 2.局部覆盖element-ui的默认样式 3.el-form 标签绑定data中的form时候 element-ui select 下拉框位置错乱 今天写bug时 ,突然发现个element下拉框的样式出现错乱,折腾了大半个小时总算搞定了,这里分享下. 先上错乱图 看上图,正常情况下下拉选项应该贴着select框的,而此时两者相隔甚远

随机推荐