我正在实现 React Router,以便在单击任何表行(每行都是一个用户/客户)时从搜索结果表链接到单独的配置文件组件。尝试使用 Link
格式化表格是一场噩梦,因此我在每个表格行的 onClick
处理程序中使用 browserHistory.push()
。
问题:我需要根据单击的唯一行来渲染配置文件,并且我尝试将参数传递给 browserHistory
,但运气为零。要么找不到该组件,要么它只是访问 /tools/customer-lookup/profile
。
编辑:更新为添加一个处理函数,然后调用 browserHistory.push()
路由器设置:
<Provider store={Store}>
<Router history={browserHistory}>
<Route path="/tools/customer-lookup" component={CustomerLookupApp} />
<Route path="/tools/customer-lookup/profile/:id" component={CustomerProfile} />
</Router>
</Provider>
表行:(没有将 { id }
传递给 browserHistory.push()
)
constructor(props) {
super(props);
this.pushToUrl = this.pushToUrl.bind(this);
this.state = {
selectedRow: []
};
};
render() {
let tableData = this.props.data.map(customer => {
return (
<tr onClick={this.pushToUrl(`/tools/customer-lookup/profile/${customer.address}`)} id="customer-data-row">
<td>{customer.firstname}</td>
<td>{customer.lastname}</td>
<td>{customer.birthdate}</td>
<td>{customer.city}</td>
<td>{customer.state}</td>
<td>{customer.address}</td>
</tr>
);
});
pushToUrl(url) {
console.log(url);
}
tr
onClick
处理程序似乎为每一行数据调用一次,这毫无意义。以下是来自 onClick
的处理程序的 console.logs:
最佳答案
您可以按照这些思路做一些事情。传递您想要导航到的网址。
goTo(url) {
browserHistory.push(url)
}
render() {
let tableData = this.props.data.map(customer => {
return (
<tr onClick={this.goTo.bind(this, `/tools/customer-lookup/profile/${customer.id}`)} id="customer-data-row">
<td>{customer.firstname}</td>
<td>{customer.lastname}</td>
<td>{customer.birthdate}</td>
<td>{customer.city}</td>
<td>{customer.state}</td>
<td>{customer.address}</td>
</tr>
);
});
关于javascript - React Router 将参数从表行传递到 browserHistory,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/40162580/