jfr*_*rye 18 javascript reactjs react-router
我是新手使用ReactJS和react-router.我想要一个可点击的表格行,如下所示:
<Link to=“#”>
<tr>
<td>{this.props.whatever1}</td>
<td>{this.props.whatever2}</td>
<td>{this.props.whatever3}</td>
</tr>
</Link>
Run Code Online (Sandbox Code Playgroud)
但我知道你不能<a>
在<tbody>
和<tr>
标签之间放置标签.我怎么能做到这一点?
PS:如果可能的话我不想使用jQuery.
Igo*_*hin 16
onClick
有效,但有时你需要一个实际的<a>
标签出于各种原因:
对于类似的情况,我最终创建了一个Td组件:
import React, { PropTypes } from 'react';
import { Link } from 'react-router';
import styles from './styles.css';
const propTypes = {
children: PropTypes.node.isRequired,
to: PropTypes.string,
};
function Td({ children, to }) {
// Conditionally wrapping content into a link
const content = to ? (
<Link className={styles.content} to={to}>{children}</Link>
) : (
<div className={styles.content}>{children}</div>
);
return (
<td>
{content}
</td>
);
}
Td.propTypes = propTypes;
export default Td;
Run Code Online (Sandbox Code Playgroud)
使按钮填充整个单元格的样式:
.content {
display: block;
color: inherit;
padding: 5px 10px;
}
Run Code Online (Sandbox Code Playgroud)
然后使用这样的组件:
const users = this.props.users.map((user) =>
<tr key={user.id}>
<Td to={`/users/${user.id}/edit`}>{user.name}</Td>
<Td to={`/users/${user.id}/edit`}>{user.email}</Td>
<Td to={`/users/${user.id}/edit`}>{user.username}</Td>
</tr>
);
Run Code Online (Sandbox Code Playgroud)
是的,您必须多次传递to
道具,但同时您可以更好地控制可点击区域,并且您可能在表格中有其他互动元素,例如复选框.
你为什么不用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>
);
}
});
Run Code Online (Sandbox Code Playgroud)
归档时间: |
|
查看次数: |
16787 次 |
最近记录: |