因此,我从 React 和 ES6 开始,并陷入了非常基础的困境。非常感谢您的帮助。
handleClick() 抛出一个错误:
Uncaught TypeError: Cannot read property 'handleClick' of undefined
代码如下
export default class MenuItems extends React.Component {
constructor(props) {
super(props)
this.state = {active: false}
this.handleClick = this.handleClick.bind(this)
}
handleClick() {
this.setState({ active: !this.state.active });
}
render() {
let active = this.state.active
let menuItems = [{text: 'Logo'}, {text: 'promo'}, {text: 'benefits'}, { text: 'form'}]
return (
<ul>
{menuItems.map(function(item) {
return <li className={active ? 'active' : ''} onClick={this.handleClick.bind(this)} key={item.id}>{item.text}</li>;
})}
</ul>
);
}
}
最佳答案
{menuItems.map(function(item) {
return <li className={active ? 'active' : ''} onClick={this.handleClick.bind(this)} key={item.id}>{item.text}</li>;
})}
因为您的代码处于严格模式(模块始终处于严格模式),所以 this
在您传递给 .map
的函数中是 undefined
>.
您要么必须通过传递 second argument to .map
来显式设置上下文:
{menuItems.map(function(item) {
// ...
}, this)}
或者使用 arrow function :
{menuItems.map(
item => <li className={active ? 'active' : ''} onClick={this.handleClick.bind(this)} key={item.id}>{item.text}</li>
)}
关于javascript - React 0.13 类方法未定义,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/29549375/