我的问题是:点击修改,进入到修改页面,要怎么破?
table数据:
import React, {Component} from 'react';
import {render} from 'react-dom';
import {BootstrapTable, TableHeaderColumn} from 'react-bootstrap-table';
import ReactBootstrap , {Panel,Buttons,Button,ButtonToolbar,Modals,Overlays} from 'react-bootstrap';
import { Router, Route, IndexRoute, Link, IndexLink, browserHistory } from 'react-router';
import ChangeEitd from './ChangeEitd.js';
//数据
const products = [];
//修改跳转
//const buttonsInstance = (
// <ButtonToolbar>
// <Button id="change" bsStyle="link">修改</Button>
// <Button id="see" bsStyle="link">查看</Button>
// </ButtonToolbar>
//)
function addProducts(quantity) {
const startId = products.length;
for (let i = 0; i < quantity; i++) {
const id = startId + i;
products.push({
id: id,
name: '',
title: "猪为什么那么能吃",
creatTime: "2016-04-05",
createOn: "陈文飞",
clicks: 200,
reads: 256
});
}
}
//添加数据
addProducts(50);
//组件
export default class Table extends Component {
//初始化值
constructor(props){
super(props);
this.state = {name: ""}
}
//单元格自定义内容
nameFormat(cell,row){
return (
<div>
**<Link to={{ pathname: '/ChangeEitd', query: row}}>修改</Link>**
</div>
)
}
render() {
//选择复选框
const selectRowProp = {
mode: "checkbox",
clickToSelect: false
};
const BootTable = (
<BootstrapTable data={products} striped={true} hover={true} pagination={true} insertRow={true}
deleteRow={true} selectRow={selectRowProp}>
<TableHeaderColumn isKey={true} dataField="id">ID</TableHeaderColumn>
<TableHeaderColumn dataField="name" dataFormat={this.nameFormat}>操作</TableHeaderColumn>
<TableHeaderColumn dataField="title">文章标题</TableHeaderColumn>
<TableHeaderColumn dataField="createOn">创建人</TableHeaderColumn>
<TableHeaderColumn dataField="creatTime">创建时间</TableHeaderColumn>
<TableHeaderColumn dataField="clicks">点击数</TableHeaderColumn>
<TableHeaderColumn dataField="reads">阅读数</TableHeaderColumn>
</BootstrapTable>
)
return (
<div>
{BootTable}
</div>
)
}
}
渲染到页面时使用了Router:
import React from 'react';
import {render} from 'react-dom';
import TableList from '../news/create_article/article_list.js';
import ChangeEitd from '../news/create_article/ChangeEitd.js';
import { Router , Route , IndexRoute , browserHistory } from 'react-router';
import ReactBootstrap, {Modal,open} from 'react-bootstrap';
render((
<Router history={browserHistory}>
<Route path="/" component={TableList}>
**<Route path="/ChangeEitd" component={ChangeEitd} />**
</Route>
</Router>
),document.getElementById('table'));
现在的情况是,我点击了修改,在URL里也找到了当前行的修改后的URL:
但是就是不跳转。。。。
抱大腿了!大神们,求赐教!!