无法从渲染内部调用渲染外部的函数（在 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

值 不是从函数的回调函数内部调用时在函数内部期望的值。thissingleClicksetTimeout

this应该参考你的组件来获取函数，以便能够调用函数FolderIconsingleClickselectModal

将函数更改为使用箭头函数语法，以便函数内部的值是组件singleClickthissingleClickFolderIcon

const singleClick = (event) => {

     this.selectModal('Modal A');

     alert("single click");

}