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

Question

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

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

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

我已经尝试创建一个方法并通过 props 传递它，但它没有按预期调用。

这一切都在下方链接的 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 事件调用父组件方法

ondragend event in Child Component calls Parent Component method

reactjs

drag-and-drop

react-dom