Phản ứng 0.13 phương thức lớp không xác định

Question

Vì vậy, tôi đã bắt đầu với React và ES6 và bị mắc kẹt với những điều cơ bản. Thực sự đánh giá cao một số trợ giúp.

handleClick() throws một lỗi:

Uncaught TypeError: Cannot read property 'handleClick' of undefined 

đang sau

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> 
    ); 
    } 
} 

Answer 1

{menuItems.map(function(item) { 
    return <li className={active ? 'active' : ''} onClick={this.handleClick.bind(this)} key={item.id}>{item.text}</li>; 
})} 

Bởi vì mã của bạn đang ở chế độ nghiêm ngặt (module luôn trong chế độ nghiêm ngặt), this là undefined bên trong chức năng bạn chuyển đến .map.

Bạn có thể phải thiết lập một cách rõ ràng bối cảnh bằng cách đi qua một second argument to .map:

{menuItems.map(function(item) { 
    // ... 
}, this)} 

Hoặc sử dụng một arrow function:

{menuItems.map(
    item => <li className={active ? 'active' : ''} onClick={this.handleClick.bind(this)} key={item.id}>{item.text}</li> 
)} 

Answer 2

react.js:18794 Warning: bind(): Bạn đang ràng buộc một phương pháp thành phần để các thành phần. Phản ứng thực hiện điều này cho bạn một cách tự động theo cách hiệu suất cao, vì vậy bạn có thể xóa cuộc gọi này một cách an toàn. Xem BlueBall

vì vậy chỉ cần như thế này:

{ 
    menuItems.map(
    item => <li className={active ? 'active' : ''} 
    onClick={this.handleClick} key={item.id}>{item.text}</li> 
)}