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

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调用OpenModal时，它会抛出错误-

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

如何从showhistory调用onOpenModal？

Answer 1

首先，您没有调用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 2

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

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 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声明为类属性，而不是实例属性。

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
}

或者如果你想使用相同的代码放置，使用箭头函数在渲染内部定义

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

从html调用它，就像showHistory()