在我的表單欄位中，我不能寫任何東西。只是顯示表單和輸入欄位，沒有什么可以像往常一樣輸入名稱欄位。我只是宣告我的代碼中給出的狀態。我不明白我該怎么辦我找不到錯誤。錯誤在哪里。我是新手。你能幫我解決這個問題嗎？
import axios from 'axios';
import React, { Component } from 'react'
import { Form } from 'react-bootstrap';
import { Link } from 'react-router-dom';
class AddStudent extends Component {
state = {
name:'',
course:'',
email:'',
phone:'',
}
handleInput = (e) => {
this.setState=
({
[e.target.name]:e.target.value
});
}
saveStudent = async (e) =>{
e.preventDefault();
const res = await axios.post('http://localhost:8000/api/add-student',this.state);
if(res.data.states === 200)
{
console.log(res.data.message);
this.setState ({
name:'',
course:'',
email:'',
phone:'',
});
}
}
render()
{
return (
<div className="container">
<div className="row">
<div className="col-md-6">
<div className="card">
<div className="card-holder">
<h4>
Add Student
<Link to={'/'} className="btn btn-primary btn-sm float-end"> Back </Link>
</h4>
</div>
<div className='card-body'>
<form onSubmit={this.saveStudent} >
<div className="form-group mb-3">
<label>Student Name</label>
<input type="text" name="name" onChange={this.handleInput} value={this.state.name} className="form-control" />
</div>
<div className="form-group mb-3">
<label>Student Course</label>
<input type="text" name="course" onChange={this.handleInput} value={this.state.course} className="form-control" />
</div>
<div className="form-group mb-3">
<label>Student Email</label>
<input type="text" name="email" onChange={this.handleInput} value={this.state.email} className="form-control" />
</div>
<div className="form-group mb-3">
<label>Student Phone</label>
<input type="text" name="phone" onChange={this.handleInput} value={this.state.phone} className="form-control" />
</div>
<div className="form-group mb-3">
<button type="submit" className="btn btn-primary">Save Student</button>
</div>
</form>
</div>
</div>
</div>
</div>
</div>
);
}
}
export default AddStudentuj5u.com熱心網友回復：
您必須使用setState作為單獨的函式，而不是作為變數。只需更改您的handleInput功能，如下所示。
handleInput = (e) => {
this.setState({ [e.target.name]: e.target.value });
};
uj5u.com熱心網友回復：
你有一個typo在你的handleInput功能。只需從您的功能中洗掉=標志即可。handleInput
handleInput = (e) => {
this.setState({ [e.target.name]:e.target.value });
}
轉載請註明出處，本文鏈接：https://www.uj5u.com/houduan/479596.html
標籤：javascript 反应 形式 输入 反应钩子