在onClick属性中枚举存储在state中的函数数组

Question

你好，我有一个React应用程序，有一个菜单。

状态有2个数组，其中一个与菜单项的名称作为字符串，我设法用map函数渲染，我想枚举onClick属性上的每个菜单项，从我在我的状态的函数数组的函数。

这是代码:

class MeniuPF extends Component {
constructor(props) {
super(props);
this.state = {
collapseID: '',

lista:[
'Adeverinta venit','Bilant anual','Bilant semestrial',
],
listafunctii:[
this.toggleAdeverintaVenit,
this.toggleBilantAnual,
this.toggleBilantSemestrial,
],
listaMesaje:false,
bilantAnual:false,
bilantSemestrial:false,
};
this.toggleListaMesaje = this.toggleListaMesaje.bind(this);
this.toggleBilantAnual = this.toggleBilantAnual.bind(this);
this.toggleBilantSemestrial = this.toggleBilantSemestrial.bind(this);
}
toggleCollapse = collapseID => () => {
this.setState(prevState => ({
collapseID: prevState.collapseID !== collapseID ? collapseID : ''
}));
};
toggleBilantAnual() {
this.setState({bilantAnual:!this.state.bilantAnual})
this.setState({bilantSemestrial:false})
this.setState({adeverintaVenit:false})

this.setState(prevState => ({
collapseID: prevState.collapseID !== this.state.collapseID ? this.state.collapseID : ''
}));


}
toggleBilantSemestrial() {
this.setState({bilantAnual:false})
this.setState({bilantSemestrial:!this.state.bilantSemestrial})
this.setState({adeverintaVenit:false})

this.setState(prevState => ({
collapseID: prevState.collapseID !== this.state.collapseID ? this.state.collapseID : ''
}));

}

toggleAdeverintaVenit() {

this.setState({bilantAnual:false})
this.setState({bilantSemestrial:false})
this.setState({adeverintaVenit:!this.state.adeverintaVenit})

this.setState(prevState => ({
collapseID: prevState.collapseID !== this.state.collapseID ? this.state.collapseID : ''
}));


}
check() {
this.state.listafunctii.map((list) =>
console.log(this.state.listafunctii[0])
)
};
render() {
return (
<div>

<Router>
<MDBContainer>
<MDBNavbar
color='light-blue lighten-4'
style={{ marginTop: '20px' }}
light
>
<MDBContainer>
<MDBNavbarBrand>Declaratii persoane juridice</MDBNavbarBrand>
<MDBNavbarToggler
onClick={this.toggleCollapse('navbarCollapse1')}
/>
<MDBCollapse
id='navbarCollapse1'
isOpen={this.state.collapseID}
navbar
>
<MDBNavbarNav left>

<MDBNavItem >
{this.state.lista.map((list,i) =>
<MDBNavLink to='#!' onClick={this.state.listafunctii[i}>{list}</MDBNavLink>
)}

</MDBNavItem>

</MDBNavbarNav>
</MDBCollapse>
</MDBContainer>
</MDBNavbar>
</MDBContainer>
</Router>
<br></br>
{this.state.listaMesaje ? <ListaMesaje/>:null}
{this.state.bilantAnual ? <BilantAnual/>:null}
{this.state.bilantSemestrial ? <BilantSemestrial/>:null}

</div>
);
}
}
export default MeniuPF;

我有一个at onClick属性this.state。listfunctii[0]因为我认为它会枚举我在状态数组中编写的函数，但我已经检查了使用check方法返回的内容，并在控制台中显示了整个函数。当我点击菜单项时，它会给我这个错误:

TypeError: Cannot read property 'setState' of undefined

所以它调用函数，但它给我这个错误…当我console.log数组的映射时，它会返回函数中包含的内容。我只想列举函数调用，例如:this。toggleAdeverintaVenit只显示在onClick属性。

Thanks in advance

Answer 1

我找到了答案…我把方法的绑定移到了状态之前，它工作了…并添加onClick属性

onClick={this.state.listafunctii[i]()}