ReactJS Skylight Modal - 单击子组件的按钮时隐藏模式

Question

我有天窗模式。它可以正常工作。但是最近它已经停止工作了。

我使用父组件的 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;

子组件

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;

console.log 是

----------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.handleClose 绑定到这个对象

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

不确定是否还需要绑定 skylight={this.dialogAddBowler}？

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