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

Question

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

FolderIcon.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;

Answer 1

当从 setTimeout 函数的回调函数中调用时，this 的值不是您在 singleClick 函数中期望的值。

this 应该引用您的 FolderIcon 组件，以便 singleClick 函数能够调用 selectModal 函数

更改 singleClick 函数以使用箭头函数语法，以便 singleClick 函数内的值 this 是 FolderIcon 分量

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

Answer 2

我建议您将函数从渲染移至 class 本身。我在这里看不出为什么要区别对待他们。

这样，singleClick 函数中的 this 应该引用定义的 class，并且应该找到预期的函数。

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

Unable to call function that is outside render, from inside render (in reactjs)

javascript

frontend

render

reactjs