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时，它会引发错误-

未捕获的TypeError：无法读取未定义的属性'onOpenModal'

如何从showhistory中调用onOpenModal？

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()

Answer 2

首先，您没有呼叫onOpenModal，但缺少括号：this.onOpenModal()，其次，您必须将showHistory绑定到this。希望对您有所帮助：

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
        }.bind(this);
        return (
             //...
             //...
       );
   }
}

Answer 3

您需要将方法绑定到构造函数中，或者可以在调用该方法时将其绑定

 class TableView extends React.Component { 
       constructor(props){
       this.state = {
            open: false,
        };
       this.onOpenModal = this.onOpenModal.bind(this)
       this.onCloseModal = this.onCloseModal.bind(this)
         } 
        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>
           );
       }
    }

也请注意，
在您的情况下，状态声明为类属性，而不是实例属性。

 state = {} //class property will not available on this object

在构造函数中声明状态

constructor() {
  this.state = {};   // now state available on this object
}

或在引用状态时删除它。最好在构造函数中声明状态，因为您正在使用方法this.setState

Answer 4

我不确定为什么要在类/组件级别进行定义，为什么要在render内部定义函数。

在类/组件中，您可以将其平行放置以进行渲染。

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

或如果要使用相同的代码放置，请使用箭头功能在render内部定义

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

然后从html像这样showHistory()

调用它

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

4 个答案: