react + layui 坑总结

时间：2017-05-04 21:41:28 阅读：572 评论：0 收藏：0 [点我收藏+]

标签：demo checked 分页 ble orm bsp 字段函数虚拟

与react 结合的时候，layui 是纯dom操作，而react是虚拟dom ，二者的结合难免会出现诸多问题。

1 select 下拉框

默认值的修改要通过defaultValue 属性来修改，并且通过componentDidMount 来重新渲染from.render()，

而且渲染到页面中，不是data开头的属性，react 不会加载该属性。只能通过componentDidMount 中重新增加属性。

如：

export const LanguagePairs = React.createClass({

getInitialState() {

return {};

componentDidMount(){

$(‘select‘).attr(‘lay-verify‘,‘required‘);

layui.use([‘form‘], function(){

var form = layui.form();

form.render(); //更新全部

});

render(){

const self = this ;

return <select name={this.props.name} lay-filter="aihao" lay-verify="required" disabled={this.props.disabled || false } defaultValue={this.props.checkedLanguage || ‘‘}>

{

(this.props.name == ‘srcLanguage‘ && this.props.isChecked) ?

: <option value=""></option>

}

{

language.map((data,index)=>{

for( let k in data ){

return <option key={index} value={k}>{data[k]}</option>

}

})

}

</select>

}

});

2 layui 分页模块的处理

开发过程中经常要做 ajax 异步请求返回数据，来做分页处理。但是在实现的时候可以这么做，将laypage 定义为顶部变量，并且layer.use函数中定义，然后在ajax返回数据后在给laypage 赋值。

let laypage ;

ayui.use([‘laypage‘], function(){
laypage = layui.laypage
,layer = layui.layer;
});
laypage({
cont: ‘demo1‘
,pages: 100 //总页数
,groups: 5 //连续显示分页数
});

3 layui 弹窗点击取消的时候会在url 后面增加from字段信息

默认也会提交，只要增加 return false 即可。

react + layui 坑总结

标签：demo checked 分页 ble orm bsp 字段函数虚拟

原文地址：http://www.cnblogs.com/weblinda/p/6740721.html

踩

(0)

评论一句话评论（0）

分享档案

更多>

2021年07月29日 (22)
2021年07月28日 (40)
2021年07月27日 (32)
2021年07月26日 (79)
2021年07月23日 (29)
2021年07月22日 (30)
2021年07月21日 (42)
2021年07月20日 (16)
2021年07月19日 (90)
2021年07月16日 (35)

周排行