为什么表单不在反应中的输入字段中输入

Question

在我的表单字段中，我不能写 anything.there 只是显示表单和输入字段，不能像往常一样输入名称字段其他 fields.I 只是声明我的代码中给出的状态。我不明白我该怎么办我找不到 error.Where 是 error.I 是反应中的新人。你能帮我解决这个问题吗？

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

您必须将 setState 用作单独的函数，而不是变量。只需更改 handleInput 函数，如下所示。

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

Answer 2

您的 handleInput 函数中有一个 typo。只需从 handleInput 函数中删除 = 符号即可。

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

为什么表单不在反应中的输入字段中输入

why form not taking input in the input field in react

javascript

reactjs

forms

input

react-hooks