jfrye jfrye - 5 months ago 158
Javascript Question

React-router: Using <Link> as clickable data table row

I'm new to using ReactJS and react-router. I want a clickable table row and something like the following setup:

<Link to=“#”>
<tr>
<td>{this.props.whatever1}</td>
<td>{this.props.whatever2}</td>
<td>{this.props.whatever3}</td>
</tr>
</Link>


but I know you can't put
<a>
tags between the
<tbody>
and
<tr>
tags. How else can I accomplish this?

PS: I prefer not to use jQuery if possible.

Answer

Why don't you just use onClick?

var ReactTable = React.createClass({
  handleClick: function(e) {
    this.router.transitionTo('index');
  },
  render: function() {
    return(
      <div>
        <table>
          <thead>
            <tr>
              <th>Name</th>
              <th>Age</th>
              <th>Full Detail</th>
            </tr>
          </thead>
            <tbody>
              <tr onClick={this.handleClick.bind(this)}>
                <td>{user.name}</td>
                <td>{user.age}</td>
                <td>{details}</td>
              </tr>
            </tbody>
        </table>
      </div>
    );
  }
});