react-dom

src/components/Multiple/index.jsx

@@ -4,6 +4,7 @@ import $ from 'jquery';
 import classNames from 'classnames';
 import {handleEnter,isIE,filterArr,deepClone,filterDataArr} from '@utils/tools.js';
 import {Notify} from '@commonComp';
+import ReactDom from "react-dom";
 import config from '@config/index.js';
 /**
   单列多选组件（tagtype=1,controlType=2）
@@ -199,8 +200,11 @@ class Multiple extends react.Component{
 
   render(){
     const {placeholder,value,show,data} = this.props;
+    console.log(placeholder,'name')
     const {editable,boxTop,boxLeft} = this.state;
-    return <div className={style["container"]}>
+    const domNode = document.getElementById('root');
+    return ReactDom.createPortal(<div className={style["container"]}>
+    {/* return <div className={style["container"]}> */}
       <div className={this.getClass()}
       ref={this.$div}
       onClick={this.handleShow}
@@ -208,7 +212,7 @@ class Multiple extends react.Component{
       onBlur={this.handleBlur}
       onInput={this.onChange}
       onkeydown={handleEnter}
-      contentEditable={editable}>{value||placeholder}</div>
+      contentEditable={editable}>ssss{value||placeholder}</div>
       <div className={this.getListClass()} style={{top:boxTop,left:boxLeft}} contentEditable="false">
         <ul>
           {data&&data.map((it)=>{
@@ -219,7 +223,8 @@ class Multiple extends react.Component{
         </ul>
         
       </div>
-    </div>
+    {/* </div> */}
+    </div>,domNode)
   }
 
 }