react中無法使用原生的removeChild 怎么辦？

displaySelect(){

        var _self = this;

        document.getElementsByClassName('locking_list')[0].style.display = 'block';

        for (var i = 1;i<this.state.taskArray.length;i++) {
            var li_div = document.createElement('li');
            li_div.innerHTML = this.state.taskArray[i];
            document.getElementsByClassName('locking_ul')[0].appendChild(li_div);
        }


        var locking_ul = document.getElementsByClassName('locking_ul')[0];
        var locking_show = document.getElementsByClassName('locking_show')[0];


  
        console.log(locking_ul.childNodes.length)


        for(var iul = locking_ul.childNodes.length - 1; iul >= 0; i--) {
            console.log(iul)
            locking_ul.removeChild(locking_ul.childNodes[iul]);
        }
 

      
        for(var ui = 1; ui < this.state.taskArray.length; ui++){
            (function(arg){

                if(_self.state.taskArray[ui] != locking_ul.innerHTML){
                    var liShow = document.createElement('li');
                    liShow.style.height = '30px'
                    liShow.style.lineHeight = '30px'
                    liShow.setAttribute('value', _self.state.taskId[ui])
                    liShow.innerHTML = _self.state.taskArray[ui];
                    //console.log(taskArray[ui])
                    // console.log(arg)

                    liShow.onclick = function(e){
                        console.log(e);
                        locking_show.innerHTML = e.target.outerHTML;
                    }

                    locking_ul.appendChild(liShow);

                }
            })(ui);//調(diào)用時(shí)參數(shù)

        }


    }

componentDidMount() {

        var UtilsBoolean = false; // 讀取本地?cái)?shù)據(jù)
        //var UtilsBoolean = true; // 從服務(wù)器讀取數(shù)據(jù)

        var taskArray = "task": [
            { "name": "任務(wù)一：開始了", "id": "1，2，3" },
            { "name": "任務(wù)二：準(zhǔn)備中", "id": "2，3，5，6，7" },
            { "name": "任務(wù)三：進(jìn)行中", "id": "5，6，7" },
            { "name": "任務(wù)四：執(zhí)行了", "id": "10，12，15" },
            { "name": "任務(wù)五：結(jié)束了", "id": "21，23，25" }
        ],

        for (var i = 1;i<taskArray.length;i++) {
            var li_div = document.createElement('li');
            li_div.innerHTML = taskArray[i];
            //document.getElementById('taskList').appendChild(li_div);
        }
        

        var taskArray = []

        for(var tname in returnData.task){
            taskArray[tname] = returnData.task[tname]['name']
        }

        this.setState({taskArray: taskArray})

        var taskId = []
        for(var tid in returnData.task){
            taskId[tid] = returnData.task[tid]['id']
        }

        this.setState({taskId: taskId})

        var locking_show = document.getElementsByClassName('locking_show')[0]; // 展示文字

        locking_show.innerHTML = taskArray[0];

    }


render() {
       
        return (

            <div style={divStyle}
                 className='primaryStyle'>

                {/* 按鈕 電信 聯(lián)通 */}
                <div>
                    <button className={'telecomButton'} ><span>電信 </span></button>
                    <button className={'chinaUnicom'}><span>聯(lián)通 </span></button>
                </div>


                {/* 選擇 鎖定與未鎖定 onmouseenter onmouseleave */}
                <div className={'locking_frame'}
                     onMouseEnter={this.displaySelect}
                     onMouseLeave={this.hideSelect}>
                    <div className={'locking_result'} >
                        <span className={'locking_show'}></span>
                    </div>
                    <div className={'locking_list'}>
                        <ul className={'locking_ul'}>
                            {taskArray.map((item)=>{
                                return this.renderLi(item)
                            })}
                        </ul>
                    </div>
                </div>
                )
            }