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

Question

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

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

当我在 HTML 标记中使用箭头 function 时，它可以工作，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;

Answer 1

当从setTimeout function 的回调 function 内部调用时， this不是您在singleClick function 中所期望的值。

this应该参考您的FolderIcon组件的singleClick function 以便能够调用selectModal function

更改singleClick function 以使用箭头 function 语法，以便在singleClick function 中的this是FolderIcon组件

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

Answer 2

我建议您将函数从渲染移到 class 本身。 我没有看到为什么他们应该被区别对待的原因。

this ，singleClick function 中的 this 应该引用定义的 class，并且应该找到预期的 function。