- 修改之前(多选组件预览状态)
- 修改后 (多选组件预览状态)
两段代码,
一种是原始方法,
一种是react的函数组件方法,
两段代码都可以用,选择你认为好理解的代码即可.
原始方法
//将这段代码放到页面加载完成事件里面exportfunctiondidMount() { if (this.utils.isViewPage()) { //checkboxField_lbfz35vr替换成你的多选组件filedIdletcheckBoxEle=this.$('checkboxField_lbfz35vr'); letnewHtml=`<div style="font-size: 15px;padding:5px;"><span style="color: #a2a3a5;">${checkBoxEle.get('label')}</span><br/><br/>`; checkBoxEle.getValue().forEach(item=> { newHtml+=`<div style="padding-bottom: 4px;line-height:22px">${item}</div>` }) newHtml+='</div><br/>'; ReactDOM.findDOMNode(checkBoxEle).innerHTML=newHtml; } }
react函数组件方法
functionYeyidiv(props) { let { checkBoxEle } =props; constrootStyle= { fontSize: "15px", padding: "6px", } consttitleStyle={ color: "#a2a3a5", } constitemStyle={ paddingBottom: "4px;", lineHeight: "22px", } return ( <divstyle={rootStyle}><spanstyle={titleStyle}>{checkBoxEle.get('label')}</span><br /><br/> {checkBoxEle.getValue().map(item=><divstyle={itemStyle}>{item}</div>)}<br/></div> ) } // 当页面渲染完毕后马上调用下面的函数，这个函数是在当前页面 - 设置 - 生命周期 - 页面加载完成时中被关联的。exportfunctiondidMount() { if (this.utils.isViewPage()) { //checkboxField_lbfz35vr替换成你的多选组件filedIdletcheckBoxEle=this.$('checkboxField_lbfz35vr'); ReactDOM.render( <YeyidivcheckBoxEle={checkBoxEle} />,ReactDOM.findDOMNode(checkBoxEle) ); } }
