react + layui 坑總結


與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 即可。


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM