ReactJS：如何使用 setState 切换活动项目

Question

自己发现错误，看下面我的回答

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

我有语句列表，默认情况下第一个是活动的。我想在点击时切换为活动状态。

下面的代码将 Statements 的组件状态 activeIndex 更改为单击语句的索引。但是 Statement 组件道具 active 并没有像我假设的那样做出反应，它只是从每个 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 函数如何知道索引变量是什么？

ReactJS：如何使用 setState 切换活动项目

ReactJS: how to use setState to swtich active item

javascript

coffeescript

reactjs

react-rails