複雜層次結構的反應事件處理

-1

我在ReactJS中開始了一個遊戲項目，作爲學習框架的一種方式，並且我陷入了一個問題。複雜層次結構的反應事件處理

我使用react-hexgrid作爲我的核心組件，它基於六邊形。我有六個<HexTile/>件組成的兩個<Hexagon/>每個和一個<GameLayout/>板，我可以拖動&下降他們。

的<HexTile/>必須對<GameLayout/>完全放置，我實現這個滴加每次一個<Hexagon/>與first變量，指示是第一六角丟棄。問題是我需要在移動完成時阻止其餘的<HexTile/>。我想把這六個<HexTile/>放在<TileList/>裏面，但是因爲拖動事件監聽器綁定到<Hexagon/>組件，所以我不知道如何告訴<TileList/>一個移動正在完成，因此它禁用了其他<HexTile/>。

如何讓<TileList/>聆聽<HexTile/>拖動事件？ <HexTile/>基於此<TilesLayout/>部件（遊戲本身需要這個例子爲基礎）：https://github.com/Hellenic/react-hexgrid/tree/master/examples/drag-and-drop

來源

2017-06-03 Julián Bonilla

我強烈建議你使用Redux（react-redux）來處理事件，只要你的情況不是無足輕重就可以用道具和狀態來解決。然後，在處理事件時，您不必再考慮組件層次結構。您的應用程序越複雜，您使用Redux的越多。 – JulienD

您可以將狀態添加到偵聽該拖動事件的'TileList'嗎？像'isTileMoving'這樣的東西，並傳遞一個設置該狀態的處理程序 – BravoZulu

你可以這樣做：

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 
    } 
}

來源

2017-06-03 17:31:03 BravoZulu

複雜層次結構的反應事件處理

回答

相關問題