Почему входные данные моей формы не принимают никакой информации?

Question

Я использую 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;

Answer 1

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});

Answer 2

Когда вы setState вы не идете на правильный уровень при обновлении модели формы.Вам нужно изменить это на:

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

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