Javascript React JS:无法读取属性

我在学习如何反应；我有这样的问题。当我调用函数“handleSearch”时，它会崩溃，出现类型错误：无法读取

console.log（this.CONTACTS）上未定义的属性“CONTACTS”

我在Constructor中定义联系人。并在输入的一次更改中调用方法handleSearch（）。然后发生错误。
但是这一切都没问题。CONTACTS.map（）

import React，{Component}来自'React'；
从“./Contact”导入联系人；
导入“/Contacts.css”；
类ContactList扩展组件{
构造函数（）{
超级（）；
此项。联系人=[
{
id:1，
姓名：“Alex”，
电话：'777'，
图像：'https://78.media.tumblr.com/2b5293dc3133abeab79aa74e151e74f9/tumblr_pa1h148ulz1rzp45wo1_75sq.jpg'
}, 
{
id:2，
名字：“安”，
电话：888，
图像：'https://78.media.tumblr.com/2b5293dc3133abeab79aa74e151e74f9/tumblr_pa1h148ulz1rzp45wo1_75sq.jpg'        
},
{
id:3，
姓名：“泽尔”，
电话:"999",，
图像：'https://78.media.tumblr.com/2b5293dc3133abeab79aa74e151e74f9/tumblr_pa1h148ulz1rzp45wo1_75sq.jpg'        
}
];
此.state={
displayedContacts:this.CONTACTS
};
}
handleSearch（事件）{
var query=event.target.value.toLowerCase（）；
console.log（this.CONTACTS）；
} 
render（）{
返回(

{
this.CONTACTS.map（函数（el）{
返回
})
}

);
}
}
导出默认联系人列表；
您必须在构造函数中使用
bind
。在事件处理程序
中，此
引用DOM节点。请将此行添加到构造函数：

this.handleSearch=this.handleSearch.bind（this）
您必须在构造函数中使用
bind
。在事件处理程序
中，此
引用DOM节点。请将此行添加到构造函数：

this.handleSearch=this.handleSearch.bind（this）
onChange={this.handleSearch}
必须是
onChange={e=>this.handleSearch（e）}
onChange={this.handleSearch}
必须是
onChange={e=>this.handleSearch（e）}
import React, { Component } from 'react';
import Contact from './Contact';
import './Contacts.css';


    class ContactList extends Component {

      constructor() {
        super();

        this.CONTACTS = [
          {
            id: 1,
            name: 'Alex',
            phone: '777',
            image: 'https://78.media.tumblr.com/2b5293dc3133abeab79aa74e151e74f9/tumblr_pa1h148ulz1rzp45wo1_75sq.jpg'
          }, 
          {
            id: 2,
            name: 'Ann',
            phone: '888',
            image: 'https://78.media.tumblr.com/2b5293dc3133abeab79aa74e151e74f9/tumblr_pa1h148ulz1rzp45wo1_75sq.jpg'        
          },
          {
            id: 3,
            name: 'Zel',
            phone: '999',
            image: 'https://78.media.tumblr.com/2b5293dc3133abeab79aa74e151e74f9/tumblr_pa1h148ulz1rzp45wo1_75sq.jpg'        
          }
        ];

        this.state = {
          displayedContacts: this.CONTACTS
        };
      }

      handleSearch(event) {
        var query = event.target.value.toLowerCase();

        console.log(this.CONTACTS);
      } 

      render() {
        return (
          <div className="contacts">
            <input type="text" className="search-field" onChange={ this.handleSearch }/>

            <ul className="contacts-list">
              {
                this.CONTACTS.map(function(el) {
                  return <Contact 
                    key={el.id} 
                    name={el.name}
                    phone={el.phone}
                    image={el.image} /> 
                })
              }
            </ul>
          </div>
        );
      }
    }

    export default ContactList;