与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="999">自动检测</option>
: <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 即可。