查询获得一个表,后面有个编辑,点击编辑把值带到编辑页面,修改后保存
学习“【React全家桶入门之八】用户编辑与删除” ,一直搞不定 ,现在下的依赖模块都是最新的,router是v4了,但是教程有些已经过时了
https://blog.csdn.net/awaw00/article/details/54890439
1,首页 ,index.js
ReactDOM.render((
<Router history={hashHistory}>
<div>
<Route path="/" component={HomePage}/>
<Route path="/user/add" component={UserAddPage}/>
<Route path="/user/list" component={UserListPage}/>
<Route path="/user/edit/:id" component={UserEditPage}/>
</div>
</Router>
), document.getElementById('app'));
2,发送参数值的用户列表页面,UserList.js
static contextTypes = {
router: PropTypes.object.isRequired
};
<td>
<a href="javascript:void(0)" onClick={() => this.handleEdit(user)}>编辑</a>
<a href="javascript:void(0)" onClick={() => this.handleDel(user)}>删除</a>
</td>
```
其中,handleEdit函数如下,可以弹出user.id的值
```
handleEdit (user) {
alert(user.id);
this.context.router.history.push('/user/edit/' + user.id);
}
```
3,接收参数值的页面UserEdit.js
```
componentWillMount () {
const userId = this.context.router.params.id;
alert(userId);
//const userId = 10001;
fetch('http://localhost:3000/user/' + userId)
.then(res => res.json())
.then(res => {
this.setState({
user: res
});
});
}
```
运行后报错:TypeError: Cannot read property 'id' of undefined
指向const userId = this.context.router.params.id;