这是一个索引页面。
import React from "react";
import { render } from "react-dom";
import { BrowserRouter } from 'react-router-dom';
import {Router, Route, browserHistory} from "react-router";
import {EmployeeList} from "./employeeList";
import {EditForm} from "./edit";
class App extends React. Component{
render(){
return (
<BrowserRouter history={browserHistory}>
<switch>
<Route path={"/"} component={EmployeeList} />
<Route path={"edit/:id"} component={EditForm} />
</switch>
</BrowserRouter>
);
}
}
render(<App />, window.document.getElementById("app"));
这是来自此页面的员工页面。点击按钮后,我想要获取ID并需要传递给js页面,我需要使用此获取的id调用anthor api。
import React from "react";
import {browserHistory} from "react-router";
import { createHashHistory } from 'history';
export class EmployeeList extends React. Component {
constructor(props) {
super(props);
this.state = {
students: [],
}
this.onNavigateEdit = this.onNavigateEdit.bind(this);
};
onNavigateEdit() {
//alert(id);
this.browserHistory.push("/edit");
}
componentDidMount() {
fetch('https://api.myjson.com/bins/bz92u')
.then(response => response.json())
.then((responseJson) => {
this.setState({ students: responseJson.students })
})
}
render() {
const student = this.state.students.map((item, i) => (
<tr>
<td>{item.id}</td>
<td>{item.fname}</td>
<td>{item.lname}</td>
<td>
<button className="btn btn-primary" onClick={this.onNavigateEdit}>
EDIT
</button>
</td>
</tr>
));
return (
<div>
<table class="table table-dark table-striped">
<thead>
<tr>
<th>Id</th>
<th>First Name</th>
<th>Last Name</th>
<th>Button</th>
</tr>
</thead>
{student}
</table>
</div>
);
}
}
这是一个编辑js页面。
import React from "react";
import { render } from "react-dom";
export class EditForm extends React. Component {
constructor(props) {
super(props);
this.state = {
students: []
}
};
render() {
return (
<div></div>
);
}
}
M获取类型错误是无法读取未定义的属性'push'。 因此需要使用白色路由器方法。