Coffeescript-React回调：发送子标题单击返回到父标题

刚刚开始学习Coffeescript，我正在使用React.js。我正在尝试确定单击了哪个，有人建议我不要在每个标题上使用数据属性。我有一些想法如何在handleHeaderClick函数下处理这个问题，但我不确定应该如何实现。我也在考虑将ContactsTable组件分为ContactsTableHeader组件和ContactsTableRow组件，但我在ContactsTableHeader中仍然会遇到同样的问题—确定单击了哪个标题

#Application.cjsx

handleHeaderClick: ->
   # childComponent.props
   # childComponent.refs
   # React.findDOMNode(childComponent.refs.firstName)
   # React.findDOMNode(childComponent.refs.lastName)
   # React.findDOMNode(childComponent.refs.age)

render: ->
  <div>
    <ContactsTable contactList={@state.contacts} onClick={@handleHeaderClick} />
  </div>



#ContactsTable.cjsx

render: ->
  if @props.contactList
    contactsList = @props.contactList.map (contact) ->
                <tr><td>{"#{contact.firstName}"}</td><td>{"#{contact.lastName}"}</td><td>{contact.age}</td></tr>


  <table style={tableStyle}>
    <thead style={headerStyle} onClick=@props.onClick>
        <tr>
            <th>FirstName</th>
            <th>Last Name</th>
            <th>Age</th>
        </tr>
    </thead>
    <tbody>
        {contactsList}
    </tbody>
  </table>

#Application.cjsx
点击：点击->
#儿童道具
#childComponent.refs
#React.findDOMNode（childComponent.refs.firstName）
#React.findDOMNode（childComponent.refs.lastName）
#React.findDOMNode（childComponent.refs.age）
渲染：->
#ContactsTable.cjsx
渲染：->
if@props.contactList
contactsList=@props.contactList.map（联系人）->
{{{contact.firstName}{{{contact.lastName}}{contact.age}
名字
姓
年龄
{contactsList}

您可以这样做

#Application.cjsx

handleHeaderClick: (header) ->
  @setState({clickedHeader: header})
  #do something else

render: ->
  <div>
    <ContactsTable contactList={@state.contacts} onClick={@handleHeaderClick} />
  </div>



#ContactsTable.cjsx

render: ->
  if @props.contactList
    contactsList = @props.contactList.map (contact) ->
                <tr><td>{"#{contact.firstName}"}</td><td>{"#{contact.lastName}"}</td><td>{contact.age}</td></tr>


  <table style={tableStyle}>
    <thead style={headerStyle}>
        <tr>
            <th onClick={@props.onClick('FirstName')}>FirstName</th>
            <th onClick={@props.onClick('LastName')}>Last Name</th>
            <th onClick={@props.onClick('Age')}>Age</th>
        </tr>
    </thead>
    <tbody>
        {contactsList}
    </tbody>
  </table>

#Application.cjsx
点击：（标题）->
@设置状态（{clickedHeader:header}）
#做点别的
渲染：->
#ContactsTable.cjsx
渲染：->
if@props.contactList
contactsList=@props.contactList.map（联系人）->
{{{contact.firstName}{{{contact.lastName}}{contact.age}
名字
姓
年龄
{contactsList}

---

此处，clickedHeader保存在Application.cjsx中的组件中。您还可以将其保存在

ContactsTableHeader

中，它看起来应该类似于此。

如果我错了，请纠正我。我假设您将单击一个

th

，它是“名字”、“姓氏”或“年龄”。你想捕获点击的标题吗？@DeepakPrasanna正是！对不起，我描述的第一行的标题标签被剪掉了。你能告诉我我的答案是否有用吗？