reactjs - 오류 - thisfriendchat이 함수가 아닙니다 (jquery + react)

<li> 를 생성하는 jsx 파일이 있습니다  페이지로드시 요소 이 <li>  항목은 ajax 반환 값을 기반으로 생성됩니다.

각 <li> 마다  요소 프로그래밍 방식으로 "click"이벤트를 추가하고 있으며, 반응 함수 (friendChat)를 호출합니다. 그러나 이것을 구현하는 동안 다음과 같은 오류가 발생합니다. (그러나 생성자 내부에서 초기화 된 다른 속성을 얻을 수 있습니다.)

• 오류 : this.friendChat은 기능이 아닙니다

다음은 내 jsx 파일입니다.

미리 감사합니다.

jsx 파일

import React from 'react'
class Home extends React.Component {

constructor(props) {
    super(props);
    this.state = {username: "Anu"};
    this.friendChat = this.friendChat.bind(this);

  }

  friendChat(friendId)
  {
        console.log("Clicked friend id: "+ friendId );
  }


componentDidMount() {
     console.log('Component DID MOUNT!');

 $(document).ready(function(){

     $.ajax({
        type: "GET",
        url: "/friends/myFriends",
        success: function(data){
          if (data == "No friends")
            {
                 console.log("No friends exist");
                document.getElementById('friends').innerHTML = "Please add 
   friends";
             }
            else
            {
            console.log("Friends: "+data);
             //Displaying friends in div
             for (var i = 0; i < data.length; i++) 
              {
                  console.log("Friend: "+ data[i]);
                 var li=document.createElement("li");
                 //var br=document.createElement("br");
                 li.appendChild(document.createTextNode(data[i]));
                 li.setAttribute("id",data[i]);

                console.log(this.state.username);
           //It's Printing correctusername (Anu) initialised inside 
            //the constructor

                //Adding on click event for each friend
               li.addEventListener("click", function() { 
               this.friendChat(this.id); }, false);
               //Here it's showing the error of this.friendChat is not a 
               //function
             //Appending list item to document
             document.getElementById("friends").appendChild(li);
          }
        }

    }.bind(this)
 });

 }

 render() {
   return (

  <div>

        <div className="home_recentfriends">
           <ul id="friends"></ul>
        </div>

  </div>

   )
   }

 }
 export default Home