Событие ondragend в дочернем компоненте вызывает метод родительского компонента - PullRequest
Новая
       7

Событие ondragend в дочернем компоненте вызывает метод родительского компонента

0 голосов
/ 26 января 2019

Я пытаюсь получить список дочерних компонентов ListItem в моем родительском компоненте DragAndDrop, которые можно перетаскивать, но при удалении или прекращении перетаскивания следует вызвать метод в моем родительском компоненте DragAndDrop, чтобы я мог запустить алгоритм для вычисления значений между всемимои дочерние компоненты ListItem.

Я хочу иметь возможность визуально отбрасывать любой компонент ListItem на месте, а также рассчитывать новые значения проп.

Моя текущая проблема заключается в том, что я не могу, чтобы событие ondragend дочернего компонента вызывало метод в родительском объекте.

Я пытался создатьметод и передача его через подпорки, но он не вызывает, как ожидалось.

Это все в коде, который связан ниже, и вот мой код.

class ListItem extends React.Component{
  constructor(props){
    super(props);
  }

    render(){
       console.log('ListItem');
      return(    
        <li draggable="true" 
           ondragend={ (e) => this.props.onDragEnd(e) }
          className="item" >
        {this.props.data}
      </li>
       );
    }
}

class DragAndDrop extends React.Component {
  constructor(props){
    super(props);
    this.state = {
      items: this.constructExample()
    };
  }


  onDragEndEvent = (e) => { 
    e.preventDefault(); 
    var data = ev.dataTransfer.getData("text/html");
    console.log('on drag end');
    console.log(data);
    //e.target.parentNode.insertBefore();
   }


  constructExample = () => {
   return(['A', 'B', 'C'].map( (i,x) => <ListItem key="i" data={x} onDragEnd={this.onDragEndEvent}/>));
  }

  onDragEvent = (e) => { 
    e.preventDefault(); 
    this.dragged = e.currentTarget; 
    e.dataTransfer.effectAllowed = 'move';
    e.dataTransfer.setData('text/html', this.dragged);

  }


  render() {
    console.log('DragAndDrop');
    return (
      <div>
        <h3 id="title">Drag and Drop Demo</h3> 
        <div className="drop-zone">
          <ul className="list"> 
            {this.state.items}
          </ul>
        </div>
      </div>
    );
  }
}


//needed for display
ReactDOM.render( <DragAndDrop />, document.getElementById('root'));

1 Ответ

0 голосов
/ 26 января 2019

моя проблема здесь в том, что у меня в React ondrag и ondragend они должны быть OnDrag и OnDragEnd

Я предполагаю, что это должно быть потому, что React является JSX, а неHTML, поэтому он не распознал их правильно.

...