Javascript 从内部条件呈现的JSX调用类方法

试图从JSX内部调用一个类方法，该类方法存储在类内部的变量中，并根据用户所处的步骤有条件地呈现。我很确定问题出在我尝试使用

这个

时

class CreateGameModal extends React.Component {
    constructor(props) {
        super(props)
        this.state = {
            showChooseGameType: true,
            showGameLocation: false,
            showGameInfo: false,
            showSuggestedInvites: false,
            showConfirmation: false
        };

        this.onGameCreate = this.onGameCreate.bind(this);
    }

    render() {
        const { hideModal } = this.props;
        const { showChooseGameType, showGameLocation, showGameInfo, showSuggestedInvites, showConfirmation } = this.state;

        return (
                <Modal style={styles.modal} isVisible={this.props.isVisible} onBackdropPress={hideModal}>
                    { showChooseGameType &&
                        this.chooseGameCard
                    }

                    { showGameLocation &&
                        this.chooseGameLocationCard
                    }

                    { showGameInfo &&
                        this.chooseGameInfoCard
                    }

                    { showSuggestedInvites &&
                        this.chooseSuggestedInvitesCard
                    }

                    { showConfirmation &&
                        this.showConfirmationCard
                    }
                </Modal>
        );
    }

    chooseGameCard = ( 
        <View style={styles.createCard}>
            <Text style={styles.titleText} numberOfLines={1} >Create Game</Text>
            <ScreenStageBar numberOfStages={4} currentStage={1}/>
            <Text style={styles.descText} numberOfLines={1}>What type of game would you like to create?</Text>
            <Button title="Next" onPress={() => {
                this.setState({ showChooseGameType: false })
                this.setState({ showGameLocation: true })
            }} />
        </View>
    );

    chooseGameLocationCard = (
        <View style={styles.createCard}>
            <Text style={styles.titleText} numberOfLines={1} >Choose Game Location!</Text>
            <ScreenStageBar numberOfStages={4} currentStage={2}/>
            <Button title="Next" onPress={() => {
                this.setState({ showGameLocation: false })
                this.setState({ showGameInfo: true })
            }} />
        </View>
    );

    chooseGameInfoCard = (
        <View style={styles.createCard}>
            <Text style={styles.titleText} numberOfLines={1}  >Enter Game Information</Text>
            <ScreenStageBar numberOfStages={4} currentStage={3}/>
            <Button title="Next" onPress={() => {
                this.setState({ showGameInfo: false })
                this.setState({ showSuggestedInvites: true })
            }} />
        </View>
    );

    showConfirmationCard = (
        <View style={styles.createCard}>
            <Text style={styles.titleText} numberOfLines={1} >Congratulations!</Text>
        </View>
    );

    chooseSuggestedInvitesCard = (
        <View style={styles.createCard}>
            <Text style={styles.text}>Suggested Invites</Text>
            <ScreenStageBar numberOfStages={4} currentStage={4}/>
            <Button title="Create Game" onPress={this.onGameCreate} />
        </View>
    );

    onGameCreate = () => {
        //TODO: Add game creation logic with back end
        console.log("Press!");
        this.setState({ showSuggestedInvites: false });
        this.setState({ showConfirmation: true });
    }
}

类createGameModel扩展React.Component{
建造师（道具）{
超级（道具）
此.state={
showChooseGameType:true，
showGameLocation:错误，
showGameInfo:false，
showSuggestedVites:错误，
showConfirmation:假
};
this.onGameCreate=this.onGameCreate.bind（this）；
}
render（）{
const{hideModal}=this.props；
const{showChooseGameType、showGameLocation、showGameInfo、showSuggestedVites、showConfirmation}=this.state；
返回(
{showthoosegametype&&
这是我的名片
}
{showGameLocation&&
这是我的名片
}
{showGameInfo&&
这个.chooseGameInfoCard
}
{showSuggestedVites&&
此。选择建议的ViteScard
}
{show确认&&
这是我的确认卡
}
);
}
chooseGameCard=（
创造游戏
您希望创建什么类型的游戏？
{
this.setState（{showthoosegametype:false}）
this.setState（{showGameLocation:true}）
}} />
);
chooseGameLocationCard=(
选择游戏地点！
{
this.setState（{showGameLocation:false}）
this.setState（{showGameInfo:true}）
}} />
);
chooseGameInfoCard=(
输入游戏信息
{
this.setState（{showGameInfo:false}）
this.setState（{showSuggestedVites:true}）
}} />
);
显示确认卡=(
祝贺
);
选择建议的ViteScard=(
建议邀请
);
onGameCreate=（）=>{
//TODO:添加带有后端的游戏创建逻辑
console.log（“按！”）；
this.setState（{showSuggestedVites:false}）；
this.setState（{showConfirmation:true}）；
}
}

---

未记录“按下”控制台日志，因此未呈现我想在点击创建游戏按钮后显示的最后一点内容。

您可以使用如下箭头功能：

onGameCreate = () => {
    //TODO: Add game creation logic with back end
    console.log('Press!')
    this.setState({ showSuggestedInvites: false });
    this.setState({ showConfirmation: true });
}

---

您可以像这样使用箭头功能：

onGameCreate = () => {
    //TODO: Add game creation logic with back end
    console.log('Press!')
    this.setState({ showSuggestedInvites: false });
    this.setState({ showConfirmation: true });
}

---

我觉得很好。。。您是否尝试在“按”之后立即记录“this”？顺便说一句，为了避免

这种

绑定的无稽之谈，我总是喜欢使用：

onPress={（）=>this.onGameCreate（）}

，尽管我说你的东西看起来不错。^不要认为它可以避免

这种

绑定。如果您想避免在构造函数中使用方法，可以将其定义为箭头函数（例如，

onGameCreate=（）=>{…}

），它是@Nick。我一直在用它。尽管你建议的方式是另一种选择。@seesharper@Nick这些改变都没有解决这个问题。它没有出错，但现在也不会从控制台日志记录“按下”消息。所以它没有进入这个方法。我可以通过将

chooseSuggestedInvestCard

放在render方法中，然后调用

chooseSuggestedInvestCard

而不是使用

this

来解决这个问题，但我很好奇为什么它不能正常工作。将这些JSX对象放在渲染中而不是类中是最好的做法。我觉得这很好。。。您是否尝试在“按”之后立即记录“this”？顺便说一句，为了避免

这种

绑定的无稽之谈，我总是喜欢使用：

onPress={（）=>this.onGameCreate（）}

，尽管我说你的东西看起来不错。^不要认为它可以避免

这种

绑定。如果您想避免在构造函数中使用方法，可以将其定义为箭头函数（例如，

onGameCreate=（）=>{…}

），它是@Nick。我一直在用它。尽管你建议的方式是另一种选择。@seesharper@Nick这些改变都没有解决这个问题。它没有出错，但现在也不会从控制台日志记录“按下”消息。所以它没有进入这个方法。我可以通过将

chooseSuggestedInvestCard

放在render方法中，然后调用

chooseSuggestedInvestCard

而不是使用

this

来解决这个问题，但我很好奇为什么它不能正常工作。将这些JSX对象放在呈现中而不是类中是最佳做法。尝试了，但没有成功。现在不会出错，但也不会登录到

按

到控制台。这是正确答案。最初测试时，我错误地调用了该方法。尝试了该方法，但没有成功。现在不会出错，但也不会登录到

按

到控制台。这是正确答案。最初测试时，我错误地调用了该方法。