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

• 背景
  最近在涉猎 “【React-Hook】” 的前端知识；
  发现跟之前的 Layui （适合我们后端程序猿的一个前端框架） 框架混合使用时会出现各种问题啊！
  最开始遇到的问题 出现在 “<select>” 上
  在此记录一番，希望帮到各位道友 …

---

• 首先，注意到的一点是：

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

• 小小分析一下：

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

好消息是：毕竟还是可以根据人家提供的 【 监听 select 选择 】 操作的！

• 核心操作代码如下：

<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> 进行动态渲染，正在摸索中 …

---