Javascript 为什么我的表单输入不包含任何信息？

我正在使用React创建一个表单。当我尝试输入其中一种表单时，什么都没有发生。在React-dev工具中，每个输入的状态一次只接收一个字母。当我输入console.log e.target时，它不会更新输入的值

我不确定我做错了什么。有什么想法吗

这是我的密码：

import React, {Component} from "react";
import Form from "./Form";
import Badge from "./Badge";

class App extends Component {
    constructor(){
        super();

        this.state = {
            data: [],
            inputs: {
                firstName: "",
                lastName: "",
                email: "",
                birth: "",
                phone: "",
                favFood: "",
                bio: ""
            }

        }
        this.handleChange = this.handleChange.bind(this);
        this.handleSubmit = this.handleSubmit.bind(this);

    }

    handleChange(e){
        const {name, value} = e.target;
        console.log(e.target);
        this.setState({
            [name]: value
        })
    }

    handleSubmit(e){
        e.preventDefault();
        this.setState(prevState => {
            return{
                data: [
                    ...prevState.data,
                    this.state.inputs
                ],

                firstName: "",
                lastName: "",
                email: "",
                birth: "",
                phone: "",
                favFood: "",
                bio: ""
            }
        })
    }

    render(){
        return(
            <div>
                <Form inputChange={this.handleChange}
                submitForm={this.handleSubmit} 
                fName={this.state.inputs.firstName} 
                lName={this.state.inputs.lastName} 
                email={this.state.inputs.email} 
                birth={this.state.inputs.birth} 
                phone={this.state.inputs.phone} 
                favFood={this.state.inputs.favFood} 
                bio={this.state.inputs.bio}/>
            </div>
        )
    }  
}

export default App;

import React，{Component}来自“React”；
从“/Form”导入表单；
从“/Badge”导入徽章；
类应用程序扩展组件{
构造函数（）{
超级（）；
此.state={
数据：[]，
投入：{
名字：“，
姓氏：“，
电邮：“，
出生日期：“，
电话：“，
favFood:“，
个人简历：“
}
}
this.handleChange=this.handleChange.bind（this）；
this.handleSubmit=this.handleSubmit.bind（this）；
}
手变（e）{
常量{name，value}=e.target；
console.log（如target）；
这是我的国家({
[名称]：值
})
}
handleSubmit（e）{
e、 预防默认值（）；
this.setState（prevState=>{
返回{
数据：[
…prevState.data，
这个。状态。输入
],
名字：“，
姓氏：“，
电邮：“，
出生日期：“，
电话：“，
favFood:“，
个人简历：“
}
})
}
render（）{
返回(
)
}  
}
导出默认应用程序；

当您

设置状态时

更新表单模型时，您将无法达到正确的级别。您需要将其更改为：

        this.setState(prevState => {
        return{
            data: [
                ...prevState.data,
                this.state.inputs
            ],

            inputs: {
              firstName: "",
              lastName: "",
              email: "",
              birth: "",
              phone: "",
              favFood: "",
              bio: ""
            }
        }
    })

---

你能为你的表单组件包含代码吗？handleChange（e）{const{name，value}=e.target；console.log（e.target）；this.setState（{inputs:{…this.state.inputs，[name]：value}}//fix here）}你输入了一个错误，你的输入状态保存在state.inputs中，你更新状态根

Your handleChange is not correct, you are setting value for each variable but you are referencing to it as object inside input ex, this.state.inputs.firstName

let inputs = Object.assign({}, this.state.inputs);    //create copy of object
inputs.firstName = 'JohnDoe';                        //update value
this.setState({inputs});