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

【问题标题】：ReactJS: how to use setState to swtich active itemReactJS：如何使用 setState 切换活动项
【发布时间】：2017-09-07 23:04:34
【问题描述】：

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

但如果 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

【问题讨论】：

标签： javascript reactjs coffeescript react-rails

【解决方案1】：

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

错误在这一行：

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

应该是：

@props.handleActiveStatement(@props.index)

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

【讨论】：