前往小程序,Get更优阅读体验!
立即前往
首页
学习
活动
专区
工具
TVP
发布
社区首页 >专栏 >React + layui 混合状况下使用 select 标签遇到的一些问题

React + layui 混合状况下使用 select 标签遇到的一些问题

作者头像
泥豆芽儿 MT
发布2021-09-06 10:00:09
5940
发布2021-09-06 10:00:09
举报
  • 背景 最近在涉猎 “【React-Hook】” 的前端知识; 发现跟之前的 Layui (适合我们后端程序猿的一个前端框架) 框架混合使用时会出现各种问题啊! 最开始遇到的问题 出现在 “<select>” 上 在此记录一番,希望帮到各位道友 …

  • 首先,注意到的一点是:

混合状态下,Layui 的 <select> 标签是无法实现 “onChange()” 事件的,枉费鄙人一顿瞎操作!

  • 小小分析一下:
代码语言:javascript
复制
	首先,如果使用了 React ;
	按照通常的推荐操作,基本就是添加 “onChange()” 事件
	然后进行 <select> 的 value 赋值;
	但是,前端框架 Layui 对自己的组件也进行了监听绑定和渲染操作
	
	这就造成下图源码修饰的弊端:
		React 对 <select> 动态赋值时,如果不改动 "<dl>...</dl>" 中的 "class" 变化,
		那么,我们看到的和实际的 <select> 已选值就很可能出现不吻合状况!
		
	当然,如果有能力的前端爱好者,相信还是能分析优化的,主要是鄙人太菜,懒得研究 ...

好消息是:毕竟还是可以根据人家提供的 监听 select 选择 操作的!

  • 核心操作代码如下:
代码语言:javascript
复制
<script type="text/babel">
    layui.use(['form'], function () {
        let form = layui.form;
        form.on('select(toSelSkuStatus)', function (data) {
            console.log('xxxxx');
        });
    });

	...
	<select lay-filter="toSelSkuStatus" defaultValue={1} name={"sku_arr["+index+"][sku_status]"} >
	    <option value="1">上架</option>
	    <option value="0">下架</option>
	    <option value="-1">删除</option>
	</select>
	...	

</script>
  • 【注意】
  1. 使用 React 进行组件数据渲染后,还需要进行 layui 的渲染操作; 即执行代码: layui.form.render('select');
  2. <select> 标签建议添加 "defaultValue" 属性
  3. 但是还是不够理想的 毕竟不能根据数据的实时变化,对 <select> 进行动态渲染,正在摸索中 …

本文参与 腾讯云自媒体分享计划,分享自作者个人站点/博客。
原始发表:2020-11-30 ,如有侵权请联系 cloudcommunity@tencent.com 删除

本文分享自 作者个人站点/博客 前往查看

如有侵权,请联系 cloudcommunity@tencent.com 删除。

本文参与 腾讯云自媒体分享计划  ,欢迎热爱写作的你一起参与!

评论
登录后参与评论
0 条评论
热度
最新
推荐阅读
领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档