ReactJS Skylight Modal - 子コンポーネントのボタンをクリックするとモーダルを隠す

Question

私はSkylightモーダルを持っています。それはうまく動作するために使用されます。しかし、最近、それは動作を停止しました。

親コンポーネントからSkylightモーダルを使用してダイアログボックスを開き、ユーザーが選択してボタンをクリックするとSkylightを終了する必要があります。

問題は、子コンポーネントでSkylightオブジェクトが未定義になる（console.logを使用して印刷しています）ので、hide（）関数が失敗します。

助けてください

親コンポーネント

class BowlingAddBowler extends Component { 

     handleClick() { 
      this.dialogAddBowler.show(); 
      console.log('Print Skylight object', this.dialogAddBowler); 
     } 

     handleClose() { 
      this.dialogAddBowler.hide(); 
     } 

     render() { 

      return (
       <div className="row"> 
        <div className="col-xs-12"> 
         <button className="btn" onClick={this.handleClick.bind(this)}>No Bowler Selected. Click To Select</button> 
        </div> 
        <SkyLight dialogStyles={skylightStyles.dialogStyles} titleStyle={skylightStyles.titleStyle} hideOnOverlayClicked 
           ref={ref => this.dialogAddBowler = ref} title="Select a new bowler"> 
         <BowlingAddBowlerDialog refs={this.refs} parentClose={this.handleClose} skylight={this.dialogAddBowler} /> 
        </SkyLight> 
       </div> 
      ) 

     } 
    } 

    BowlingAddBowler.contextTypes = { 
     store: PropTypes.object 
    } 

    export default BowlingAddBowler; 

子コンポーネントにconsole.logがある

class BowlingAddBowlerDialog extends Component { 

     constructor(props, context) { 
      super(props, context); 

      this.handleSubmit   = this.handleSubmit.bind(this); 

     } 

     componentWillReceiveProps(nextProps, nextState) { 
      this.currState = nextState.store.getState(); 
     } 


     /** 
     * This function submits action to the store to add new bowler 
     * 
     * @param event 
     */ 
     handleSubmit(event) { 
      event.preventDefault(); 

      console.log('Skylight', this.props.skylight); 

      this.props.parentClose(); 
     } 

     render() { 

      return (
        <div> 
         <form onSubmit={this.handleSubmit}> 

          <!-- Form fields are here --> 

          <div className="form-group text-right"> 
           <button type="submit" className="btn btn-primary">&nbsp;&nbsp;Save&nbsp;&nbsp;</button> 
          </div> 
         </form> 
        </div> 
      ); 
     } 
    } 

    BowlingAddBowlerDialog.contextTypes = { 
     store: PropTypes.object 
    } 

    export default BowlingAddBowlerDialog; 

----------handleClick---------- 
BowlingAddBowler.js:12 SkyLight {props: {…}, context: {…}, refs: {…}, updater: {…}, state: {…}, …} 


----------handleSubmit---------- 
BowlingAddBowlerDialog.js:61 ParentClose ƒ handleClose() { 
      console.log(this.dialogAddBowler); 
      this.dialogAddBowler.hide(); 
     } 
BowlingAddBowlerDialog.js:62 Skylight undefined 
BowlingAddBowler.js:16 undefined 


BowlingAddBowler.js:17 Uncaught TypeError: Cannot read property 'hide' of undefined 
    at Object.handleClose [as parentClose] (BowlingAddBowler.js:17) 
    at BowlingAddBowlerDialog.handleSubmit (BowlingAddBowlerDialog.js:63) 
    at Object.ReactErrorUtils.invokeGuardedCallback (ReactErrorUtils.js:69) 
    at executeDispatch (EventPluginUtils.js:85) 
    at Object.executeDispatchesInOrder (EventPluginUtils.js:108) 
    at executeDispatchesAndRelease (EventPluginHub.js:43) 
    at executeDispatchesAndReleaseTopLevel (EventPluginHub.js:54) 
    at Array.forEach (<anonymous>) 
    at forEachAccumulated (forEachAccumulated.js:24) 
    at Object.processEventQueue (EventPluginHub.js:254) 
    at runEventQueueInBatch (ReactEventEmitterMixin.js:17) 
    at Object.handleTopLevel [as _handleTopLevel] (ReactEventEmitterMixin.js:27) 
    at handleTopLevelImpl (ReactEventListener.js:72) 
    at ReactDefaultBatchingStrategyTransaction.perform (Transaction.js:143) 
    at Object.batchedUpdates (ReactDefaultBatchingStrategy.js:62) 
    at Object.batchedUpdates (ReactUpdates.js:97) 
    at dispatchEvent (ReactEventListener.js:147) 
handleClose @ BowlingAddBowler.js:17 
handleSubmit @ BowlingAddBowlerDialog.js:63 
ReactErrorUtils.invokeGuardedCallback @ ReactErrorUtils.js:69 
executeDispatch @ EventPluginUtils.js:85 
executeDispatchesInOrder @ EventPluginUtils.js:108 
executeDispatchesAndRelease @ EventPluginHub.js:43 
executeDispatchesAndReleaseTopLevel @ EventPluginHub.js:54 
forEachAccumulated @ forEachAccumulated.js:24 
processEventQueue @ EventPluginHub.js:254 
runEventQueueInBatch @ ReactEventEmitterMixin.js:17 
handleTopLevel @ ReactEventEmitterMixin.js:27 
handleTopLevelImpl @ ReactEventListener.js:72 
perform @ Transaction.js:143 
batchedUpdates @ ReactDefaultBatchingStrategy.js:62 
batchedUpdates @ ReactUpdates.js:97 
dispatchEvent @ ReactEventListener.js:147 

Answer 1

あなたはあなたにも天窓= {this.dialogAddBowler}をバインドする必要がある場合について

<BowlingAddBowlerDialog refs={this.refs} parentClose={this.handleClose.bind(this)} skylight={this.dialogAddBowler} /> 

わからないこのオブジェクトにthis.handleCloseをバインドする必要がありますか？

skylight={this.dialogAddBowler.bind(this)}