未捕获的TypeError：无法读取未定义的属性'joinClassroom'

Question

单击“加入教室”按钮时，发生了错误。我尝试绑定this，但结果仍然是undefined，好像绑定不起作用。对于在箭头函数中使用this，我一无所知。

放置在this函数onClick中并在onClick={()=> this.joinClassroom(classcode).bind(this)}内部定义的const btn是否会影响this绑定？ / p>

joinClassroom(classcode){

        Meteor.call('smuProfile.joinClassroom', classcode, function(err, res){
            if(err) {
                message.error('Error occured while trying to join the classroom.');
            } else {
                message.success('You have successfully joined the classroom');
            }
        })
}

handleSubmit(e){
    e.preventDefault();
    this.props.form.validateFields((err, values)=>{
        if(!err){
            const value = values.classcode
            Meteor.call('classroom.check', value, function(err, data){
                if(data.length === 0){
                    message.error('There is no classroom with the code ' + value + ' in it. Please enter another code.' );
                }
                if(data.length >= 1){
                    if(data[0].owner === Meteor.userId()){
                        message.error('You have entered the code from one of your own classrooms. Please enter another code.' );
                    } else {
                        const classcode = data[0].classcode
                        console.log(classcode);
                        const key = `open${Date.now()}`
                        const btn = (
                            <Button type="primary" onClick={()=> this.joinClassroom(classcode).bind(this)}>
                                {classcode}
                                Join this classroom
                            </Button>
                        )
                        notification.open({
                            message: 'Found '+ data[0].classname,
                            description: (
                                <div key={data[0]._id}>
                                <Card className="classroom-card-join"
                                            style={{ width: 340, backgroundColor: 'transparent', }}
                                            cover={<div className="classroom-card-img" style={{backgroundImage:`url(${data[0].classheader}`, width:340, height:200, backgroundSize:'cover'}}/>}
                                                bodyStyle={{ backgroundColor:`${data[0].classroomcolor}`}}
                                            >
                                            <Meta title={data[0].classname} description={data[0].subject}/>
                                    </Card>
                                </div>
                            ),
                            duration: 0,
                            btn,
                            key,
                        });
                    }//ending
                }
            });

        }
        this.props.form.resetFields();
    });
}