>

<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


  • 답변 # 1

    솔루션 1 :해당 메소드 내의 모든 기능을 팻 화살표로 변환하면 모든 것이 작동합니다.

    예 :

    $(document).ready(function(){...})
    
    

    다음으로 변경 :

    $(document).ready(()=>{...})
    
    

    솔루션 2 :this 키워드의 참조를 변수에 저장하고 대신 해당 변수에 액세스하십시오.

    예 :

    componentDidMount() {
     const self = this;
     ....
     self.friendChat(self.id);
    }
    
    

관련 자료

  • 이전 통계 사용 Android에서 잘못된 데이터 가져 오기
  • 다음 javascript - 동적으로 생성 된 입력에서 아래쪽 화살표 키를 사용하여 커서를 다음 입력으로 이동