Javascript 无法读取属性'；函数名'；未定义React js的定义

我正在使用来自的模式，基本上我已经通过单击按钮来显示模式。然而，在模式中有另一个按钮，当我单击时，它应该执行我已经在函数中定义的任务。现在，当我在模式中单击此按钮时，我得到错误

无法读取未定义的属性“confirm\u booking”

这是我的代码

constructor(props){
         super(props)

           this.state={
                          setModalShow_available_room: false,
                          modalShow_available_room: false
                        }

                 this.confirm_booking = this.confirm_booking.bind(this)
          }

render (){

            function Available_room_modal(props) {
            return (
                <Modal
                    {...props}
                    size="sm"
                    aria-labelledby="contained-modal-title-vcenter"
                    centered>

                    <Modal.Body>
                        <Button block onClick={() => { this.confirm_booking() }} >Confirm</Button>
                    </Modal.Body>

                </Modal>
            );
        }

return(
           <div>
                  <Button block onClick={() => { this.open_modal() }} >Show modal</Button>

                   <Available_room_modal
                    show={this.state.modalShow_available_room}
                    onHide={() => {
                        this.setState({ setModalShow_available_room: false })
                        this.setState({ modalShow_available_room: false })
                    }} />
           </div>
)


}

/**then for my functions **/

/**this opens the modal **/
open_modal() {
            this.setState({ setModalShow_available_room: true })
            this.setState({ modalShow_available_room: true })
    }

/**this is the function assigned to the button inside the modal which throws an error when i click it**/
confirm_booking() {   
     this.setState({ setModalShow_available_room: false })
     this.setState({ modalShow_available_room: false }) 
    }

构造函数（道具）{
超级（道具）
这个州={
setModalShow\u可用房间：false，
modalShow可用房间：false
}
this.confirm\u booking=this.confirm\u booking.bind（this）
}
渲染（）{
可用功能\u房间\u模式（道具）{
返回(
{this.confirm_booking（）}}>confirm
);
}
返回(
{this.open_modal（）}}>Show modal
{
this.setState（{setModalShow\u available\u room:false}）
this.setState（{modalShow\u available\u room:false}）
}} />
)
}
/**那么我的功能呢**/
/**这将打开模态分析**/
open_modal（）{
this.setState（{setModalShow\u available\u room:true}）
this.setState（{modalShow\u available\u room:true}）
}
/**这是分配给模式内按钮的函数，当我单击它时，它会抛出一个错误**/
确认预订（{
this.setState（{setModalShow\u available\u room:false}）
this.setState（{modalShow\u available\u room:false}）
}

您显然不了解react是如何工作的。请先尝试查看react文档

我将尝试向您展示一些错误：

不能在render方法内声明函数。Render方法只是返回JSX代码。您可以在类中声明一个函数，从那里返回jsx并从render调用它，这是有效的

<Button block onClick={() => { this.confirm_booking() }} >Confirm</Button>

{this.confirm\u booking（）}}>确认

在这里，您正在调用this.confirm\u每次呈现组件时都会进行预订。您应该将其更改为：

<Button block onClick={this.confirm_booking}> Confirm </Button>

确认

将其更改为{this.confirm\u booking}后，我收到此错误

TypeError:无法读取未定义的属性“confirm\u booking”

我将该函数从呈现方法中带出，并声明它与其他函数一样，现在它给出了

可用的\u room\u modal“未定义”react/jsx no undef

@sam您的部分代码已经正确，另一方面，这个答案是不正确的。将

可用\u房间\u模式

移出组件。你甚至可以把它做成自己的文件。这能回答你的问题吗？问题是，

功能可用的房间模式

创建了它自己的上下文（在上面的链接中解释），这意味着在这个功能中，

这个。确认预订

是未定义的。快速修复方法是传递一些

这个。确认预订

作为

可用房间模式

的一个道具：