javascript - 'ds' 未定义 no-undef

Question

我有几个 DIV 元素，我可以使用 DRAGSELECT 库进行选择。在componentDidMount中，

componentDidMount() {
      var ds = new DragSelect({
    selectables: document.getElementsByClassName('ele-select'),
    area: document.getElementById('canvas'),
    onElementSelect: (element) => {
      var idArray = [];
      idArray.push(ds.getSelection())
     this.check(idArray)
    }
  })
    $('.text').draggable({
      cursor: 'move'
    })

    $('#canvas').on('mousedown', '.main-container',  (e) => {
      if ($(e.target).attr('class').indexOf('main-container') > -1) {
        this.unwrapAll()
        ds.start()
      } else {
        //idArray = []
        ds.stop();
        ds.break();
      }
    })
    $('#canvas').on('mouseup', function (e) {
      //idArray = []
      ds.stop();
      ds.start()
    })
  }

这会导致错误：'ds' is not defined no-undef

但是我在组件顶部使用 - /* eslint no-undef: 0 */ // --> OFF 修复了错误。

现在，当我尝试添加一个新元素并使其可选择时，它会抛出：ReferenceError: ds is not defined。

我很确定这是由于变量范围，因为 var 具有功能范围。但是我应该在哪里声明呢？甚至在构造函数内部尝试过，但似乎不起作用。

import React, { Component } from 'react';
import './App.css';
import $ from 'jquery'
import 'jquery-ui/ui/widgets/draggable';
import DragSelect from 'dragselect';
import Button from './components/Button/Button'

/* eslint no-undef: 0 */ // --> OFF
class App extends Component {
 state = {
   btn: ['Add Element', 'Wrap', 'Unwrap']
 }
  componentDidMount() {
      var ds = new DragSelect({
    selectables: document.getElementsByClassName('ele-select'),
    area: document.getElementById('canvas'),
    onElementSelect: (element) => {
      var idArray = [];
      idArray.push(ds.getSelection())
     this.check(idArray)
    }
  })
    $('.text').draggable({
      cursor: 'move'
    })

    $('#canvas').on('mousedown', '.main-container',  (e) => {
      if ($(e.target).attr('class').indexOf('main-container') > -1) {
        this.unwrapAll()
        ds.start()
      } else {
        //idArray = []
        ds.stop();
        ds.break();
      }
    })
    $('#canvas').on('mouseup', function (e) {
      //idArray = []
      ds.stop();
      ds.start()
    })
  }


clickHandler = (val) => {
if(val === 'Add Element'){
  this.addElement();
}
}
addElement = () => {
  var x = $('.text:last')
  var top = parseFloat(x.css('top').slice(0, -2))
  x = x.attr('id').slice(-1)
  $('.main-container').append("<div class='text ele-select'>" +Math.random()+ "</div>")
  $('.text:last').attr('id', 'text' + (++x))
  $('.text:last').css({
      'top': top + 27
  })
  $('.text:last').draggable({
      cursor: 'move'
  })
 ds.addSelectables(document.getElementsByClassName('ele-select'));
}
  render() {
    var button = this.state.btn.map((element,i) => {
      return <Button value={element} clicked = {() => this.clickHandler(element)} key={i + element}/>
    })
    return (
      <div>
       {button}
      <div id='canvas'>
        <div className="main-container">
          <div className="text ele-select" id='text1' draggable="true">Some text</div>
          <div className="text ele-select" id='text2' draggable="true">Another text</div>
        </div>
      </div>
      </div>
    );
  }
}


export default App;

标签： javascriptreactjs