2017-04-12 12 views
0

찾을 실수를 스위치 없음을 setState를를 사용ReactJS : 자신에 의해 활성 항목을

내 대답은 아래를 참조하지만, 처리 사건이 마법이 작동하는 방법 SMB 나를 설명하면 내가 감사하겠습니다하는 방법. 어떻게 changeActive 함수는 어떤 인덱스 변수를 알고 있습니까?

나는 목록이 있는데, 그 중 첫 번째는 기본적으로 활성화되어있다. 클릭 할 때마다 전환하고 싶습니다.

아래의 코드는 명령문의 구성 요소 상태를 activeIndex 클릭 한 명령문의 색인으로 변경합니다. 그러나 문장 구성 요소 소품 활성 내가 반응으로, 그것은 단지 모든 진술에서 disapear, 그래서 내 목록에 활성 항목이 없습니다 반응하지 않습니다.

그래서 내가 뭘 잘못 했니? 그리고 모범 사례는 무엇입니까?

statements.coffee

@Statements = React.createClass 
    getInitialState: -> 
    statements: @props.data.statements 
    activeIndex: 0 
    changeActive: (index) -> 
    @setState activeIndex: index 
    console.log(index) 
    render: -> 
    React.DOM.div 
     className: 'row' 
     React.DOM.div 
     className: 'col-sm-9 statements' 
     for statement, index in @state.statements 
      React.createElement Statement, statement: statement, index: index, key: statement.id, active: (if @state.activeIndex == index then true), handleActiveStatement: @changeActive 

statement.coffee

@Statement = React.createClass 
    handleClick: -> 
    @props.handleActiveStatement(index: @props.index) 
    render: -> 
    React.DOM.div 
     className: 'statement ' + (if @props.active then 'active ' else null) 
     onClick: @handleClick 
     @props.index+1+'. ' 
     React.DOM.span null, 
     @props.statement.body 

답변

0

OK, 내가 실수를 발견했다. 그것이 smb에 유용 할 것입니다.

오류는이 라인에 있습니다

@props.handleActiveStatement(index: @props.index) 

그것은해야한다 : 나는 감사하겠습니다

@props.handleActiveStatement(@props.index) 

, 처리 사건이 마법이 작동하는 방법 SMB 나를 설명합니다. 어떻게 changeActive 함수는 어떤 인덱스 변수를 알고 있습니까?