Reactjs : Uncaught TypeError : 정의되지 않은 함수가 아닙니다.

Question

Reactjs에서 초보자입니다. CRUD 작업을 수행하려고합니다. 하지만 삭제 이벤트를 수행 할 때 문제가 있습니다. 이것은 내 화면 모습입니다 : [1]

그리고 내 코드는 다음과 같습니다 [여기 이미지에 대한 설명을 입력]! 내가 바보 같은 실수를하고있는 중이 야 알고 있지만 내가 발견하지 않습니다

var DALHandler=React.createClass({ 
      getInitialState:function(){ 
       return{data: {objects:[]}} // variable should be created with array 
      }, 
      DeleteOrganizationFromServer: function(id) { // this is Json Function 

       $.ajax({ 
        headers: { 'Accept': 'application/json', 
        'Content-Type': 'application/json'}, 
        url: 'URL/'+id, 
        dataType: 'json', 
        type: 'Delete', 

        success: function(data) { 
         this.setState({data: data}); 
        }.bind(this), 
        error: function(xhr, status, err) { 
         console.error('url='url', status, err.toString()); 
        }.bind(this) 
       }); 
      }, 

      loadOrganizationFromServer: function() { 
       $.ajax({ 
        headers: { 'Accept': 'application/json', 
        'Content-Type': 'application/json'}, 
        url: 'URL/'+id, 
        dataType: 'json', 
        success: function(data) { 
         this.setState({data: data}); 
        }.bind(this), 
        error: function(xhr, status, err) { 
         console.error('url='url', status, err.toString()); 
        }.bind(this) 
       }); 
      },componentWillMount: function() { 
       this.loadOrganizationFromServer(); 
       //setInterval(this.loadCommentsFromServer, this.props.pollInterval); 
      },render: function() { 
       return (
        <div > 

        <OrganizationAPP onOrganizationSubmit={this.handleOrganizationSubmit} /> 
        <OrganizationList data= {this.state.data} /> 
        <Organization DeleteOrganization= {this.DeleteOrganizationFromServer} /> 


        </div> 
        ); 
      } 
     }); 

    var OrganizationList=React.createClass({ 
     render:function(){ 
      var results = this.props.data; 
      var parsed_results = results.objects; 
      var organizations = parsed_results.map(function(organization){ 
       return <Organization id={organization.id} name={organization.name} description={organization.description}> </Organization> 
      }); 
      return(<div> 
       {organizations} 
       </div>) 
     } 
    }); 

    //var converter = new Showdown.converter(); 

    var Organization = React.createClass({ 
     handleDeleteClick: function (e) { 
       //alert(this.props.id); 
       var currentId=this.props.id; 
       this.props.DeleteOrganization(); // ERROR CAUSES HERE: 


      }, 

    render: function() { 

     return (
      <div className="row"> 
      <div className="small-2 large-2 columns">{this.props.id} </div> 
      <div className="small-4 large-4 columns">{this.props.name} </div> 
      <div className="small-4 large-4 columns">{this.props.description}</div> 
      <div className="small-2 large-2 columns"> 

      <input type="button" onClick={this.handleDeleteClick} data-order={this.props.id} value="Delete" /> 

      </div> 


      </div> 
      ); 
    } 
}); 

이것을 해결하는 데 도움이됩니다. 그것을 소트하도록 도와주세요.

미리 감사드립니다.

Answer 1

myslef 그러나이 바이올린은 나를 크게 도움 : http://jsfiddle.net/ammit/wBYHY/5/

을 내가 DeleteOrganizationFromServer를 호출 OrganizationList에서 한 번 더 기능을 추가 그래서 주로 함수이므로 이제 내 코드는 다음과 같습니다.

var OrganizationHandler=React.createClass({ 
      getInitialState:function(){ 
       return{data: {objects:[]}} // variable should be created with array 
      }, 
      DeleteOrganizationFromServer: function(id) { 

       $.ajax({ 
        headers: { 'Accept': 'application/json', 
        'Content-Type': 'application/json'}, 
        url: 'url/'+id, 
        dataType: 'json', 
        type: 'Delete', 

        success: function(data) { 
         this.loadOrganizationFromServer(); 
        }.bind(this), 
        error: function(xhr, status, err) { 
         console.error('url="url', status, err.toString()); 
        }.bind(this) 
       }); 
      }, 

      loadOrganizationFromServer: function() { 
       $.ajax({ 
        headers: { 'Accept': 'application/json', 
        'Content-Type': 'application/json'}, 
        url: 'url', 
        dataType: 'json', 
        success: function(data) { 
         this.setState({data: data}); 
        }.bind(this), 
        error: function(xhr, status, err) { 
         console.error('url="url', status, err.toString()); 
        }.bind(this) 
       }); 
      }, 
      componentWillMount: function() { 
       this.loadOrganizationFromServer(); 

      },render: function() { 
       return (
        <div > 

        <OrganizationAPP onOrganizationSubmit={this.handleOrganizationSubmit} /> 
        <OrganizationList external_DeleteOrganization={this.DeleteOrganizationFromServer} data= {this.state.data} /> 

        </div> 
        ); 
      } 
     }); 

    var OrganizationList=React.createClass({ 
     internal_DeleteOrganization: function(id) { 
      this.props.external_DeleteOrganization(id); 
     }, 
     render:function(){ 
      var results = this.props.data; 
      var parsed_results = results.objects; 
      var that = this; // Not equally that to this was also causing error, 
      var organizations = parsed_results.map(function(organization){ 
       return <Organization onDeleteOrganization={that.internal_DeleteOrganization} id={organization.id} name={organization.name} description={organization.description} /> 
      }); 
      return(<div> 
       {organizations} 
       </div>) 
     } 
    }); 

    var Organization = React.createClass({ 
     handleDeleteClick: function() { 
       this.props.onDeleteOrganization(this.props.id); 
      }, 

    }); 

Answer 2

이 같은 조직 요소를 만들 : ID, 이름, 설명 :

<Organization id={organization.id} 
       name={organization.name} 
       description={organization.description}></Organization> 

그래서 조직 내 세 소품을해야합니다. 조직 내부에서 this.props.DeleteOrganization()으로 전화를 걸려고합니다. 전달되는 세 개의 소품 중 하나가 아니기 때문에 정의되지 않았습니다. 이 OrganizationList와 함께 작동하도록

, 당신은 그것을 아래로 삭제 기능을 전달해야

<OrganizationList data={this.state.data} onDelete={this.DeleteOrganizationFromServer} /> 

그리고 OrganizationList의 렌더링 함수 내에서

, 당신은 다시 아래로 전달할 수 있습니다.

<Organization id={organization.id} 
       name={organization.name} 
       description={organization.description} 
       onDelete={this.props.onDelete.bind(null, organization.id}></Organization> 

과 조직 내부

: 내가 해결 문제 관리가

handleDeleteClick: function(){ 
    this.props.onDelete() 
}