Question

我试图在React中执行发布请求。每当我在表单字段中输入要标记的内容时，都不会显示任何内容，也不会让我键入内容。下面是我的UI前端和后端代码的屏幕截图。

后端

second.post('/students/addStudent', (req, res) => {
  console.log(req.body);
  const newStudent = {role_num: req.body.role_num, first_name:req.body.first_name, last_name:req.body.last_name, marks:req.body.marks};
  db.collection('students').insertOne(newStudent,(err, obj) =>{
    if (!err) {
       res.send('New student added');
    } else {
      console.log(err);
    }
  })
});

前端

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.Enter =  this.Enter.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
  })
}
Enter(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>
        <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.Marks}/>
                  </div>
                  <div className = 'form-group'>
                     <input type = "submit" className ='btn btn-primary'value= "Add Student"/>
                    </div>

      </form>

  </div>

)
}
}

我知道这应该是格式，但我不知道为什么它不能让我在标记文本框中输入任何内容

Answer 1

将onchange功能更改为适当的功能。

ErrorLog.txt

应该成为

 <input type = "text" className ='form-control'value= {this.state.marks} onChange={this.Marks}/>

我如何在React中执行发布请求

1 个答案: