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

Question

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

FolderIcon.js：37 Uncaught TypeError： 無法在 singleClick （FolderIcon.js：37） 時讀到未定義的產物業 'selectModal'

当我像这样在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

我建议您将函数从渲染移动到类本身。我看不出有什么理由应该区别对待他们。这样，singleClick 函数内部应引用定义的类，并应找到预期的函数。this

Answer 2

值 不是从函数的回调函数内部调用时在函数内部期望的值。thissingleClicksetTimeoutthis应该参考你的组件来获取函数，以便能够调用函数FolderIconsingleClickselectModal将函数更改为使用箭头函数语法，以便函数内部的值是组件singleClickthissingleClickFolderIconconst singleClick = (event) => {&nbsp; &nbsp; &nbsp;this.selectModal('Modal A');&nbsp; &nbsp; &nbsp;alert("single click");}