ReactJS：如何使用setState旋转活动项

Question

自己发现错误，请参见下面的答案

但是，如果smb向我解释这种处理事件的神奇方式，我将不胜感激。 changeActive函数如何知道什么是索引变量？

我有语句列表，默认情况下它们首先处于活动状态。 我想点击激活。

下面的代码将Statements的组件状态activeIndex更改为clicked语句的索引。 但是激活状态的 Statement组件道具并没有像我想象的那样反应，只是从每个Statement中消失了，所以列表中没有活动的项。

那我做错了什么？ 最佳实践是什么？

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

Answer 1

好，我发现了错误。 可能对smb有用。

错误在这一行：

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

它应该是：

@props.handleActiveStatement(@props.index)

如果smb向我解释这种处理事件的神奇方式，我将不胜感激。 changeActive函数如何知道什么是索引变量？