Javascript 无法从渲染内部（在reactjs中）调用渲染外部的函数

我的问题是试图从渲染函数内部调用selectModal。我认为问题在于我需要在构造函数中绑定selectModal函数，但这没有帮助。我仍然得到相同的错误：

js:37未捕获类型错误：无法读取未定义的属性“selectModal” 点击一下（FolderIcon.js:37）

当我在HTML标记中使用箭头函数时，它会起作用， onClick={（）=>this.selectModal（'Modal A'）}， 但我只是在双击图像时才打开弹出窗口

代码如下：

class FolderIcon extends Component{

    constructor(props){
        super(props);
        this.state = {
            modal: false,
            modalInfo: ""
          }
        this.selectModal = this.selectModal.bind(this);
    }

    selectModal = (info) => {
        this.setState({
            modal: !this.state.modal,
            modalInfo: info
        })
    }



    render() {

        let clicks = [];
        let timeout;

        function singleClick(event) {
            this.selectModal('Modal A');
            alert("single click");
        }

        function doubleClick(event) {
            alert('double clicked')
        }

        function clickHandler(event) {
            event.persist()
            event.preventDefault();
            clicks.push(new Date().getTime());
            window.clearTimeout(timeout);
            timeout = window.setTimeout(() => {
                if (clicks.length > 1 && clicks[clicks.length - 1] - clicks[clicks.length - 2] < 250) {
                    doubleClick(event.target);

                } else {
                    singleClick(event.target);
                }
            }, 250);
        }
        return (
            <>
            <div>
                <img src={foldericon} onClick={clickHandler} alt="" className="folder"/>

                <p onClick={ () => this.selectModal('Modal A') }>
                     Open Modal A
                </p>

                <Modal 
                displayModal={this.state.modal}
                modalInfo={this.state.modalInfo}
                closeModal={this.selectModal}/>
            </div>
            </>

        );
    }
}

export default FolderIcon;

类FolderIcon扩展组件{
建造师（道具）{
超级（道具）；
此.state={
莫代尔：错，
modalInfo:“
}
this.selectModal=this.selectModal.bind（this）；
}
选择模态=（信息）=>{
这是我的国家({
模态：！this.state.modal，
modalInfo:info
})
}
render（）{
点击次数=[]；
让超时；
函数单击（事件）{
此选项。选择模态（“模态A”）；
警报（“单击”）；
}
函数双击（事件）{
警报（“双击”）
}
函数clickHandler（事件）{
event.persist（）
event.preventDefault（）；
单击.push（new Date（）.getTime（））；
clearTimeout（超时）；
超时=窗口。设置超时（（）=>{
如果（clicks.length>1&&clicks[clicks.length-1]-单击[clicks.length-2]<250）{
双击（event.target）；
}否则{
单击（event.target）；
}
}, 250);
}
返回(
this.selectModal（'Modal A'）}>
开放式模式A

);
}
}
导出默认FolderIcon；
当从
setTimeout
函数的回调函数中调用时，此
的值在
单键单击
函数中不是您所期望的值

此
应参考您的
FolderIcon
组件，以了解
单点
功能，从而能够调用
选择模态
功能

将
singleClick
函数更改为使用箭头函数语法，以便
singleClick
函数中的值
这个
是
FolderIcon
组件

const singleClick = (event) => {
     this.selectModal('Modal A');
     alert("single click");
}

我建议您将函数从render移到类本身。我看不出有什么理由要区别对待他们

这样，singleClick函数中的
this
应该引用定义的类，并且应该找到期望的函数。
谢谢！我明白你的意思了，我将观看一些关于箭头函数的视频，以巩固常规函数和箭头函数之间的差异。我以前尝试过，但遇到了一些问题，但我肯定会按照建议去做！