反应路由器:使用 <Link>作为可点击的数据表行 [英] React-router: Using &lt;Link&gt; as clickable data table row

问题描述

我是使用 ReactJS 和 react-router 的新手.我想要一个可点击的表格行和类似以下设置的内容:

<tr><td>{this.props.whatever1}</td><td>{this.props.whatever2}</td><td>{this.props.whatever3}</td></tr></链接>

但我知道你不能在 和 标签之间放置 标签.我还能怎么做?

PS:如果可能，我不想使用 jQuery.

解决方案

为什么不直接使用 onClick?

var ReactTable = React.createClass({句柄点击:函数(e){this.router.transitionTo('index');},渲染:函数(){返回(<div><表格><头><tr><th>姓名</th><th>年龄</th><th>完整细节</th></tr></thead><tr onClick={this.handleClick.bind(this)}><td>{user.name}</td><td>{user.age}</td><td>{详情}</td></tr></tbody>

);}});

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.

解决方案

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>
    );
  }
});

这篇关于反应路由器:使用 <Link>作为可点击的数据表行的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！