為什么表單在反應的輸入字段中不接受輸入

Question

在我的表單字段中，我不能寫任何東西。只是顯示表單和輸入字段，沒有什么可以像往常一樣輸入名稱字段。我只是聲明我的代碼中給出的狀態。 我不明白我該怎么辦我找不到錯誤。錯誤在哪里。我是新手。你能幫我解決這個問題嗎？

 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 AddStudent

Answer 1

您的handleInput函數中有typo 。 只需從您的handleInput函數中刪除=符號。

handleInput = (e) => {
  this.setState({ [e.target.name]:e.target.value });
}

Answer 2

您必須使用setState作為單獨的函數，而不是作為變量。 只需更改您的handleInput功能，如下所示。

 handleInput = (e) => {
   this.setState({ [e.target.name]: e.target.value });
 };