У меня проблемы с получением идентификатора элемента с помощью перетаскивания API - PullRequest
Новая
       5

У меня проблемы с получением идентификатора элемента с помощью перетаскивания API

1 голос
/ 26 марта 2020

Итак, я создаю свое первое приложение React, которое принимает массив и отображает его элементы на странице с их собственным идентификатором. Мне нравится использовать перетаскивание для определения того, как закончится проект, но когда я перетаскиваю одно из предметы в область, которую я, кажется, не получаю, и я врезался в кирпичную стену после поисков в течение нескольких часов. Вот функция, выполняющая основную часть работы: 

class Board extends React.Component {
  constructor(props){
    super(props)
    this.state = {field: []}
  }
  search(stuff) {
    //stuff.preventDefault();
    for (let i = 0; i < knightDeck.length; i++) {
      if (stuff == knightDeck[i].props.name) {
        this.setState({ field: [...this.state.field, knightDeck[i]]})
        break;
      }
    }
  }
  graveyard(stuff) {
    stuff.preventDefault();
    let data = stuff.dataTransfer.getData("Text")
    alert(data.toString())
  }
  startDrag(e){
    e.preventDefault()
    e.dataTransfer.setData("Text", e.target.id);
  }
  render() {
    return (
      <form
      onSubmit={e => {e.preventDefault(); this.search(document.getElementById("draw").value)}}>
        <input
          type="text"
          id="draw"
          name="x"
        ></input>
        <button
          type="button"
          onClick={() => this.search(document.getElementById("draw").value)}>
          Enter
        </button>
        <ol className="list">{this.state.field.map(function(card, index){return <li onDragStart={e => this.startDrag(e)} draggable id={index}>{card}</li>})}</ol>
        <div className="delete" onDragOver={(e) => {e.preventDefault()}}onDrop={e => this.graveyard(e)}>Graveyard</div>
      </form>
    );
  }
}

Таким образом, проблемная область (дропзона) является кладбищем, а пока я просто показываю идентификатор в диалоговом окне предупреждения, чтобы убедиться, что я получите это во-первых, и это продолжает выходить пустым Я использовал несколько вещей, кроме jQuery, потому что я не уверен, как это работает с реакцией, я знаю, что я что-то здесь упускаю, любая помощь будет оценена! (также я знаю, что сейчас это немного неаккуратно, как только я настрою это правильно, я уберу его и переименую несколько вещей)

Ответы [ 2 ]

0 голосов
/ 29 марта 2020

Решено, этот фрагмент нуждается в исправлении, я считаю, что настолько глубоко привязка this не сработала совершенно правильно и вышла неопределенной

onDragStart={e => this.startDrag(e)}

вот решение:

onDragStart={e => {e.dataTransfer.setData("Text", e.target.id)}}

0 голосов
/ 27 марта 2020

Это на самом деле перетаскивание? Я не уверен, если у вас должна быть e.preventDefault() в вашей функции startDrag. Удалите его и посмотрите, что произойдет.

...