所以我在react中创建了一个crud应用程序,我已经安装了bootstrap,但是我想使此表中的间距更整齐。我想在桌子周围添加边框。我还希望更新和删除按钮具有不同的颜色,我希望更新按钮具有蓝色按钮背景,而希望删除具有红色按钮背景。
{
"name": "apifetcher",
"version": "0.1.0",
"private": true,
"dependencies": {
"axios": "^0.19.0",
"bootstrap": "^4.3.1",
"react": "^16.8.6",
"react-dom": "^16.8.6",
"react-router-dom": "^5.0.1",
"react-scripts": "3.0.1"
},
我已经安装了引导程序,但是不知道如何将其包含在下面的文件中。我会向您展示我在项目中使用的五个文件
import React, { Component } from 'react';
import 'bootstrap/dist/css/bootstrap.min.css';
import { BrowserRouter as Router, Switch, Route, Link } from 'react-router-dom';
import EditStudent from './editform';
import StudentForm from './form';
import GetStudents from './getstudents';
import './App.css';
import 'bootstrap/dist/css/bootstrap.min.css';
class App extends Component {
render() {
return (
<Router>
<div className="container">
<nav className="navbar navbar-expand-lg navbar-light bg-light">
<Link to={'/'} className="navbar-brand">Student Attendance</Link>
<div className="collapse navbar-collapse" id="navbarSupportedContent">
<ul className="navbar-nav mr-auto">
<li className="nav-item">
<Link to={'/'} className="nav-link">My Home</Link>
</li>
<li className="nav-item">
<Link to={'/form'} className="nav-link">StudentForm</Link>
</li>
<li className="nav-item">
<Link to={'/getstudents'} className="nav-link">GetStudents</Link>
</li>
</ul>
</div>
</nav>
<Switch>
<Route exact path='/form' component={ StudentForm } />
<Route path='/editform/:id' component={ EditStudent } />
<Route path='/getstudents' component={ GetStudents } />
</Switch>
</div>
</Router>
);
}
}
export default App;
App.js
import React, {Component} from 'react';
import './App.css';
import axios from 'axios';
import { Link } from 'react-router-dom';
import 'bootstrap/dist/css/bootstrap.min.css';
export default class TableRow extends Component {
/*
constructor(props) {
super(props);
//this.deletestudent = this.deletestudent.bind(this);
}
*/
deletestudentFormer() {
axios.get( "http://localhost:3200/students")
.then((myJson) => {
this.setState({student:myJson.data});
})
.catch(error => console.error(error));
axios.post('http://localhost:3200/students/deleteStudent', {
'_id': this.props.object._id
})
.then(console.log('Student Deleted'))
.catch(err => console.log(err));
}
render(){
return(
<tr>
<td>{this.props.object._id}</td>
<td>{this.props.object.role_num} </td>
<td>{this.props.object.first_name}</td>
<td>{this.props.object.last_name}</td>
<td>{this.props.object.marks}</td>
<td>
<Link to ={{ pathname:"/editform/"+ this.props.object._id, state: this.props.object }} className = 'btn-btn-danger'>Update</Link>
</td>
<td> <button onClick={() => this.props.deleteStudent(this.props.object._id)} className = 'btn-btn-danger'>Remove</button></td>
</tr>
);
}
}
tableRow.js
import React, {Component} from 'react';
import './App.css';
import axios from 'axios';
export default class EditStudent extends Component {
constructor(props) {
super(props)
this.ChangeID = this.ChangeID.bind(this);
this.ChangeRoleNumber = this.ChangeRoleNumber.bind(this);
this.ChangeFirstName= this.ChangeFirstName.bind(this);
this.ChangeLastName = this.ChangeLastName.bind(this);
this.ChangeMarks = this.ChangeMarks.bind(this);
this.Enter = this.Enter.bind(this);
this.state = {
_id: '',
role_num: '',
first_name: '',
last_name: '',
marks: ''
}
}
componentDidMount() {
/*
axios.get('http://localhost:3200/students/student_info/'+ this.props.match.params.id)
.then(res => {
this.setState({
_id: res.data._id,
role_num: res.data.role_num,
first_name: res.data.first_name,
last_name: res.data.last_name,
marks: res.data.marks
});
})
.catch(err => {
console.log(err);
})
*/
axios.get( "http://localhost:3200/students")
.then((myJson) => {
this.setState({student:myJson.data});
})
.catch(error => console.error(error));
const student = this.props.location.state;
//console.log('===>Student to edit', student);
const {
_id, role_num,
first_name,
last_name, marks,
} = student;
this.setState({ _id, role_num, first_name, last_name, marks});
}
ChangeID(a) {
this.setState({
_id: a.target.value
})
}
ChangeRoleNumber(a) {
this.setState({
role_num: a.target.value
})
}
ChangeFirstName(a) {
this.setState({
first_name: a.target.value
})
}
ChangeLastName(a) {
this.setState({
last_name: a.target.value
})
}
ChangeMarks(a) {
this.setState({
marks: a.target.value
})
}
Enter(a) {
a.preventDefault();
const myobj = {
_id: this.state._id,
role_num: this.state.role_num,
first_name: this.state.first_name,
last_name: this.state.last_name,
marks: this.state.marks
};
axios.post('http://localhost:3200/students/updateStudent', myobj)
.then(res=> console.log(res.data));
this.props.history.push('/getstudents');
}
render() {
//console.log('Student in state ===>', this.state);
return(
<div style={{marginTop:50}}>
<h2>Update Student</h2>
<form onSubmit={this.Enter}>
<div className = 'form-group'>
<label>Enter ID: </label>
<input type = "text" className ='form-control' value= {this.state._id || ''} onChange={this.ChangeID}
/>
</div>
<div className = 'form-group'>
<label>Enter Role Number: </label>
<input type = "text" className ='form-control' value= {this.state.role_num || ''} onChange={this.ChangeRoleNumber} />
</div>
<div className = 'form-group'>
<label>Enter First Name : </label>
<input type = "text" className ='form-control'value= {this.state.first_name || ''} onChange={this.ChangeFirstName}/>
</div>
<div className = 'form-group'>
<label>Enter Last Name: </label>
<input type = "text" className ='form-control'value= {this.state.last_name || ''} onChange={this.ChangeLastName}/>
</div>
<div className = 'form-group'>
<label>Enter Marks: </label>
<input type = "text" className ='form-control'value= {this.state.marks || ''} onChange={this.ChangeMarks}/>
</div>
<div className = 'form-group'>
<input type = "submit" className ='btn btn-primary'value= "Edit Student"/>
</div>
</form>
</div>
)
}
}
editform.js
import React, {Component} from 'react';
import './App.css';
import axios from 'axios';
export default class StudentForm extends Component {
constructor(props) {
super(props)
this.ChangeID = this.ChangeID.bind(this);
this.ChangeRoleNumber = this.ChangeRoleNumber.bind(this);
this.ChangeFirstName= this.ChangeFirstName.bind(this);
this.ChangeLastName = this.ChangeLastName.bind(this);
this.ChangeMarks = this.ChangeMarks.bind(this);
this.enterstudent = this.enterstudent.bind(this);
this.state = {
_id: '',
role_num: '',
first_name: '',
last_name: '',
marks: ''
}
}
ChangeID(a) {
this.setState({
_id: a.target.value
})
}
ChangeRoleNumber(a) {
this.setState({
role_num: a.target.value
})
}
ChangeFirstName(a) {
this.setState({
first_name: a.target.value
})
}
ChangeLastName(a) {
this.setState({
last_name: a.target.value
})
}
ChangeMarks(a) {
this.setState({
marks: a.target.value
})
}
enterstudent(a) {
a.preventDefault();
const myob = {
_id: this.state._id,
role_num: this.state.role_num,
first_name: this.state.first_name,
last_name: this.state.last_name,
marks: this.state.marks
};
axios.post('http://localhost:3200/students/addStudent',myob)
.then(err => console.log(err.data));
this.setState({
_id: '',
role_num: '',
first_name: '',
last_name: '',
marks: ''
})
}
render() {
return(
<div style={{marginTop:50}}>
<h2>Add New Student</h2>
<form onSubmit={this.enterstudent}>
<div className = 'form-group'>
<label>Enter ID: </label>
<input type = "text" className ='form-control' value= {this.state._id} onChange={this.ChangeID}
/>
</div>
<div className = 'form-group'>
<label>Enter Role Number: </label>
<input type = "text" className ='form-control' value= {this.state.role_num} onChange={this.ChangeRoleNumber} />
</div>
<div className = 'form-group'>
<label>Enter First Name : </label>
<input type = "text" className ='form-control'value= {this.state.first_name} onChange={this.ChangeFirstName}/>
</div>
<div className = 'form-group'>
<label>Enter Last Name: </label>
<input type = "text" className ='form-control'value= {this.state.last_name} onChange={this.ChangeLastName}/>
</div>
<div className = 'form-group'>
<label>Enter Marks: </label>
<input type = "text" className ='form-control'value= {this.state.marks} onChange={this.ChangeMarks}/>
</div>
<div className = 'form-group'>
<input type = "submit" className ='btn btn-primary'value= "Add Student"/>
</div>
</form>
</div>
)
}
}
form.js
import React from 'react';
import './App.css';
import axios from 'axios';
import TableRow from './tableRow';
class GetStudents extends React.Component {
constructor(props) {
super(props);
this.state = {
student:[]
}
this.deleteStudent = this.deleteStudent.bind(this);
this.getStudents = this.getStudents.bind(this);
}
componentDidMount() {
//console.log('===>Get student component mounted')
axios.get( "http://localhost:3200/students")
.then((myJson) => {
this.setState({student:myJson.data});
})
.catch(error => console.error(error));
}
getStudents () {
//console.log('==>Getting students')
axios.get( "http://localhost:3200/students")
.then((myJson) => {
this.setState({student:myJson.data});
})
.catch(error => console.error(error));
}
deleteStudent(studentId) {
axios.post('http://localhost:3200/students/deleteStudent', {
'_id': studentId
})
.then(() => {
console.log('Student Deleted')
this.getStudents();
})
.catch(err => console.log(err));
}
render() {
const students = this.state.student.map((item,i)=><TableRow deleteStudent={this.deleteStudent} object={item} key={i} />);
return(
<div>
<h1 align= "center">My Student List</h1>
<table className = 'table-table-stripped' style={{margin:25}}>
<thead>
<tr>
<th>Student Id</th>
<th>Role Num</th>
<th>First Name</th>
<th>Last Name</th>
<th>Marks</th>
</tr>
</thead>
<tbody>
{students}
</tbody>
</table>
</div>
)
}
}
export default GetStudents;
getstudents.js