React.js - 전달 함수 "함수가 아닙니다"오류

하위 구성 요소에서 상위 구성 요소로 소품을 전달하려고하지만 어떤 이유로 'TypeError : this.props.onClick'오류가 발생합니다. js 콘솔에서 "자식 요소를 클릭 한 후"함수를 호출합니다.React.js - 전달 함수 "함수가 아닙니다"오류

기본적으로 내가 한 일은 하나의 카테고리 하위 구성 요소가 'selected'소품이 true 인 카테고리 목록을 관리하고 카테고리 li을 클릭 할 때마다 올바르게 업데이트하는 것입니다. 내가 지금 어떤 도움이 감사 효과적으로 아직 React.js을 사용하는 방법의 개념을 파악 것 같은 정말 생각하지 않습니다 http://jsfiddle.net/kb3gN/8023/

: 여기

코드와 jsfiddle입니다! 사전에

최고 감사 및 감사,

bnunamak

코드 :

this.state.items.map(function(item){ 
      return <Category onClick={this.handleClick} name={item[0]} selected={item[1]} />; 
     })

내가 외부 맵을 제거하는 경우 :

var CategoryList = React.createClass({ 

getInitialState:function(){ 
    return { 
     items:[ 
      ["cat1", false], 
      ["cat2", true] 
     ], 
     lastToggled:["cat2"] 
    } 
}, 

//Function passed to child (changes items state) 
handleClick:function(child){ 
    var tempItems = this.state.items; 
    if(this.state.lastToggled[0] === child.props.name){ 
     var index = this.getInd(this.state.tempItems, child.props.name); 
     tempItems[index][1] = !tempItems[index][1]; 

     this.setState({items: tempItems}); 
    }else{ 
     var newIndex = this.getInd(this.state.tempItems, child.props.name); 
     tempItems[newIndex][1] = !tempItems[newIndex][1]; 

     var oldIndex = this.getInd(this.state.tempItems, this.state.lastToggled[0]); 
     tempItems[oldIndex][1] = false; 

     this.setState({items: tempItems, lastToggled: tempItems[newIndex][0]}); 

    } 
}, 

//getInd not relevant to problem 
getInd:function(arr, elname){ 
    for (var i = arr.length - 1; i >= 0; i--) { 
     if(arr[i][0] === elname){ 
      return i; 
     } 
    }; 
    return -1; 
}, 

render:function(){ 
    return (<ul className="category-list"> 
     { 
      this.state.items.map(function(item){ 
       return <Category onClick={this.handleClick} name={item[0]} selected={item[1]} />; 
      }) 
     } 
     </ul>) 
} 

}); 


var Category = React.createClass({ 

render:function(){ 
    if(this.props.selected){ 
     return (<li onClick={this.propogateClick} className="selected">{this.props.name}</li>); 
    }else{ 
     return (<li onClick={this.propogateClick}>{this.props.name}</li>); 
    } 
}, 

propogateClick: function(){ 
    this.props.onClick(this); 
} 

}); 


React.renderComponent(<CategoryList/>, document.getElementById('example'));

출처

2014-11-23 bnunamak

분명히 그것은 여기에 범위 문제입니다 일반 카테고리를 추가하면 제대로 작동합니다 (물론 다른 문제가 있지만 클릭 기능은 성공적으로 통과했다).

(this.handleClick을 사용하지 않음으로써) 다른 방법으로 함수를 전달해야합니다.

출처

2014-11-23 13:27:13 bnunamak

당신은이 문제

this.state.items.map(function(item){ 
    return <Category onClick={this.handleClick} name={item[0]} selected={item[1]} />; 
}.bind(this))

를 해결하기 위해 바인딩을 사용할 수 있습니다

출처

2014-11-23 15:27:13 kiran

React.js - 전달 함수 "함수가 아닙니다"오류

답변

관련 문제