reactjs - 无法从渲染内部的函数调用渲染外部的方法

Question

class TableView extends React.Component {  
    state = {
        open: false,
    };

    onOpenModal = () => {
        this.setState({ open: true });
    };

    onCloseModal = () => {
        this.setState({ open: false });
    };

    render() {
        function showHistory() {
            this.onOpenModal; // not able to do this
            console.log(this.state.open); // or this
        }
        return (
             //...
             //...
            <Modal open={this.state.open} onClose={this.onCloseModal} center>
                <h2>History</h2>
                <p>
                    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam
                    pulvinar risus non risus hendrerit venenatis. Pellentesque sit amet
                    hendrerit risus, sed porttitor quam.
                </p>
            </Modal>
       );
   }
}

我可以点击 jsx 中的按钮来点击 showHistory 方法。但是，当我尝试从 showHistory 调用 onOpenModal 时，它会抛出错误 -

未捕获的类型错误：无法读取未定义的属性“onOpenModal”

如何从 showhistory 调用 onOpenModal ？

标签： reactjs

Answer 1

试试这个，你可能只需要括号

this.onOpenModal()

未能将功能移到渲染之外

class TableView extends React.Component {  
    state = {
        open: false,
    };

    onOpenModal = () => {
        this.setState({ open: true });
    };

    onCloseModal = () => {
        this.setState({ open: false });
    };

    showHistory() {
        () => this.onOpenModal() // not able to do this
        console.log(this.state.open); // or this
    }

    render() {
        return (
             //...
             //...
            <Modal open={this.state.open} onClose={this.onCloseModal} center>
                <h2>History</h2>
                <p>
                    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam
                    pulvinar risus non risus hendrerit venenatis. Pellentesque sit amet
                    hendrerit risus, sed porttitor quam.
                </p>
            </Modal>
       );
     }
   }

可能是您需要绑定this，最简单的方法是使用胖箭头函数

() => this.onOpenModal()