События в React

var CONTACTS = [ 
            { 
                id: 1, 
                name: 'Darth Vader', 
                phoneNumber: '+250966666666', 
                image: 'http://cs7.pikabu.ru/images/big_size_comm_an/2014-03_7/13962622876915.gif', 
                mail: 'testmail.ru' 
            }, { 
                id: 2, 
                name: 'Princess Leia', 
                phoneNumber: '+250966344466', 
                image: 'http://images6.fanpop.com/image/photos/33100000/CARRIE-FISHER-anakin-vader-and-princess-leia-33186069-190-149.gif' 
            }, { 
                id: 3, 
                name: 'Luke Skywalker', 
                phoneNumber: '+250976654433', 
                image: 'http://www.youshouldshare.me/wp-content/uploads/2015/03/14264215682890-anigif_enhanced-buzz-13518-1367608452-4.gif' 
            }, { 
                id: 4, 
                name: 'Chewbacca', 
                phoneNumber: '+250456784935', 
                image: 'https://media.giphy.com/media/RUUdVZqwpfTRS/giphy.gif' 
            } 
        ]; 
var Contact = React.createClass({ 
  render: function(){ 
    return <li > 
                <img src={this.props.image} /> 
                <div onClick={this.ClickFun} >{this.props.name}</div> 
                <div>{this.props.phoneNumber}</div> 
           </li>; 
  } 
}); 
var Contactlist = React.createClass({ 
  getInitialState:function(){ 
    return { 
      displayedContacts:CONTACTS 
    }; 
  }, 
  Handler: function(event){ 
    var QuerySearch = event.target.value.toLowerCase(); 
      var displayedContacts = CONTACTS.filter(function(el){ 
          var searchValue = el.name.toLowerCase(); 
          return searchValue.indexOf(QuerySearch) !==-1; 
      }); 
      this.setState({ 
        displayedContacts:displayedContacts 
      }); 
  }, 
    render: function(){ 
      return ( 
        <div> 
        <input className="Search" placeholder="Search Man" onChange={this.Handler} /> 
        <ul> 
          { 
            this.state.displayedContacts.map(function (el) { 
              return <Contact key={el.id} 
                              name={el.name} 
                              phoneNumber={el.phoneNumber} 
                              image={el.image} />; 
            }) 
          } 
        </ul> 
        </div> 
      ) 
    } 
}); 
 
ReactDOM.render(<Contactlist />,document.getElementById('content'));

body{ 
    background-color: #008080; 
    font-family: sans-serif; 
    text-align: center; 
    color: #fff; 
} 
#content{ 
    width: 400px; 
    height: 500px; 
    background-color: #20B2AA; 
    display: block; 
    margin: 0 auto; 
   box-shadow: 15px 15px 20px black; 
    padding: 10px; 
} 
input{ 
    width: 360px; 
    padding: 10px; 
    border: 1px solid black; 
} 
input:focus, 
input:hover{ 
 border: 1px solid green; 
} 
h1{ 
    margin: 20px; 
    padding: 0; 
    font-size: 30px; 
    text-transform: uppercase; 
} 
img{ 
  width: 60px; 
  height: 60px; 
  border-radius: 50%; 
} 
ul li{ 
  list-style: none; 
  border-bottom: 1px solid grey; 
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react.min.js"></script> 
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react-dom.min.js"></script> 
<div id='content'> 
 
    </div>