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'no-undef

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

现在，当我尝试添加新元素并将其设为可选时，它将引发： ReferenceError：未定义ds。

我敢肯定这是由于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;

未定义'ds'no-undef

0 个答案: