Question

我在ReactJS中开始了一个游戏项目，作为学习框架的一种方式，我遇到了一个问题。

我使用react-hexgrid作为我的核心组件，它基于六边形。我有六个<HexTile/>件，每件由两个<Hexagon/>和一个<GameLayout/>板组成，我可以拖放它们。

<HexTile/>必须完全放在<GameLayout/>上，每次使用<Hexagon/>变量表示第一个十六进制删除时，我实现了first。问题是我需要在移动完成时阻止剩余的<HexTile/> s。我想将六个<HexTile/>放在<TileList/>内，但由于拖动事件监听器绑定到<Hexagon/>组件，我不知道如何告诉<TileList/>正在进行移动，因此会禁用其他<HexTile/>。

如何让<TileList/>听取<HexTile/>拖动事件？ <HexTile/>基于<TilesLayout/>组件（游戏本身将此示例作为基础）：https://github.com/Hellenic/react-hexgrid/tree/master/examples/drag-and-drop

Answer 1

您可以执行以下操作：

class TileList extends Component {
  constructor(props){
    super(props)
    this.state = { isTileMoving: false }

    this.onDragStart = this.onDragStart.bind(this)
    this.onDragEnd = this.onDragEnd.bind(this)
  }

  onDragStart(evt, source) {
    this.setState({ isTileMoving: true })
  }

  onDragEnd(evt, source) {
    this.setState({ isTileMoving: false })
  }

  // ... Rest of your things

  render() {
    <div>
      <Hexagon onDragStart={this.onDragStart} onDragEnd={this.onDragEnd} />
      <Hexagon onDragStart={this.onDragStart} onDragEnd={this.onDragEnd} />
      <Hexagon onDragStart={this.onDragStart} onDragEnd={this.onDragEnd} />
      <Hexagon onDragStart={this.onDragStart} onDragEnd={this.onDragEnd} />
    </div>
}

在Hexagon

中

class Hexagon extends Component {
  constructor(props){
    super(props)
    this.state = // Hexagon state
  }

  onDragStart(evt, source) {
    this.props.onDragStart(evt, source)
    // Rest of your drag
  }

  onDragEnd(evt, source) {
    this.props.onDragEnd(evt, source)
    // Rest of dragEnd
  }

  // ... Rest of your things

  render() {
    //whatever your render is
  }
}

对复杂层次结构的React事件处理

1 个答案: