Question

所以我在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

如何在反应中使用Bootstrap

0 个答案: