Coffeescript

Question

刚开始学习咖啡记录，我和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>

Answer 1

你可以做这样的事。

#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>

在这里，clickedHeader保存在Application.cjsx中存在的组件中。您还可以在ContactsTableHeader中保存它，它应该类似于类似的内容。