Question

我正在尝试在我的父DragAndDrop组件中有一个可拖动的子ListItem组件列表，但是当拖放或停止拖动时，它应该在我的父DragAndDrop组件中调用一个方法，以便我可以运行算法来计算所有我的孩子ListItem组件。

我希望能够在视觉上就地放置任何ListItem组件，但也可以让它计算新的prop值。

我当前的问题是我无法让子组件的ondragend事件触发父组件中的方法。

我尝试创建一个方法并将其通过道具传递，但是调用未按预期进行。

这全部在下面链接的codepen中，这是我的代码。

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'));

Answer 1

我的问题是我在React中有ondrag和ondragend，它们分别是OnDrag和OnDragEnd

我认为一定是因为React是JSX而不是HTML，所以不能正确识别它们。

子组件中的ondragend事件会调用父组件方法

1 个答案: