在React表单中获取JavaScript对象的未定义值

Question

我是新的反应，我在尝试表单的反应，在我提交表单数据后，我存储数据的对象有未定义的值。我也在使用React状态，对于我使用过的CSS类，请查找下面的代码

import React, { useState } from "react";

const NewExpenseForm = () => {

const [enteredTitle,setEnteredTitle] = useState('');
const [enteredAmount,setEnteredAmount] = useState('');
const [enteredDate,setEnteredDate] = useState('');

const titleEventHandler = (event) => {
    setEnteredTitle(event.target.input);
};

const amountEventHandler = (event) => {
    setEnteredAmount(event.target.input);
};

const dateEventHandler = (event) => {
    setEnteredDate(event.target.input);
};

const submitHandler = (event) =>{
    event.preventDefault();
    
    const data = {
        title: enteredTitle,
        amount: enteredAmount,
        date: new Date(enteredDate)
    };

    console.log(data);

};   


return (
    <form onSubmit={submitHandler}>
        <div className="row gx-0 mt-5">
            <div className="col-6">
                <div className="ms-5 me-5">
                    <label className="form-label">Title</label>
                    <input onChange={titleEventHandler} type="text" value={enteredTitle} className="form-control" id="title_id" required/>
                </div>
            </div>
            <div className="col-6">
                <div className="ms-5 me-5">
                    <label className="form-label">Amount</label>
                    <input onChange={amountEventHandler} type="number" className="form-control" id="amount_id"/>
                </div>
            </div>
            <div className="col-6">
                <div className="ms-5 me-5">
                    <label className="form-label">Date</label>
                    <input onChange={dateEventHandler} type="date" className="form-control" id="date_id"/>
                </div>
            </div>
        </div>
        <button type="submit" className="btn btn-primary m-5">Submit</button>
    </form>
);
}

export default NewExpenseForm;

在控制台中的数据中，我得到了这个

{title: undefined, amount: '', date: Invalid Date}

我在另一个组件中调用这个组件，像这样

import NewExpenseForm from "./NewExpenseForm";

function NewExpense(){

return(
    <div>
        <NewExpenseForm/>
    </div>
);
}

export default NewExpense;

我哪里出问题了？

Answer 1

使用event.target.value而不是event.target.input

Answer 2

我对您的代码做了几处更改

import React, { useState } from "react";

const NewExpenseForm = () => {

const [user,setUser] = useState({
    enteredTitle:"",
    enteredAmount:"",
    enteredDate:""
 });

let name,value;
const titleEventHandler = (event) => {
    name = event.target.name;
    value = event.target.value;
    setUser({...user,[name]:value});
};

const submitHandler = (event) =>{
    event.preventDefault();
    console.log(user);
};   


return (
    <form onSubmit={submitHandler}>
        <div className="row gx-0 mt-5">
            <div className="col-6">
                <div className="ms-5 me-5">
                    <label className="form-label">Title</label>
                    <input onChange={titleEventHandler} value={user.enteredTitle} name="enteredTitled" type="text" value={enteredTitle} className="form-control" id="title_id" required/>
                </div>
            </div>
            <div className="col-6">
                <div className="ms-5 me-5">
                    <label className="form-label">Amount</label>
                    <input onChange={titleEventHandler} value={user.enteredAmount} name="enteredAmount" type="number" className="form-control" id="amount_id"/>
                </div>
            </div>
            <div className="col-6">
                <div className="ms-5 me-5">
                    <label className="form-label">Date</label>
                    <input onChange={titleEventHandler} value={user.enteredDate} name="enteredDate" type="date" className="form-control" id="date_id"/>
                </div>
            </div>
        </div>
        <button type="submit" className="btn btn-primary m-5">Submit</button>
    </form>
);
}

export default NewExpenseForm;

改变

1. 首先我创建了useState对象，因为使用对象很容易编写和操作。

1. ，其次，我已经在这个函数的帮助下更改了您的titleEventHandler函数，现在这段代码将能够操作状态。

Answer 3

请这边试试。

import React, { useState } from "react";

const NewExpenseForm = () => {

const [enteredTitle,setEnteredTitle] = useState('');
const [enteredAmount,setEnteredAmount] = useState(0);
const [enteredDate,setEnteredDate] = useState('');

const titleEventHandler = (event) => {
    setEnteredTitle(event?.target?.value);
};

const amountEventHandler = (event) => {
    setEnteredAmount(event?.target?.value);
};

const dateEventHandler = (event) => {
    setEnteredDate(event?.target?.input);
};

const submitHandler = (event) =>{
   const data = {
        title: enteredTitle,
        amount: enteredAmount,
        date: enteredDate
    };
 console.log(data);
    event.preventDefault();
   
};   


return (
    <form onSubmit={submitHandler}>
        <div className="row gx-0 mt-5">
            <div className="col-6">
                <div className="ms-5 me-5">
                    <label className="form-label">Title</label>
                    <input onChange={titleEventHandler} type="text" value={enteredTitle} className="form-control" id="title_id" required/>
                </div>
            </div>
            <div className="col-6">
                <div className="ms-5 me-5">
                    <label className="form-label">Amount</label>
                    <input onChange={amountEventHandler} type="number" className="form-control" id="amount_id"/>
                </div>
            </div>
            <div className="col-6">
                <div className="ms-5 me-5">
                    <label className="form-label">Date</label>
                    <input onChange={dateEventHandler} type="date" className="form-control" id="date_id"/>
                </div>
            </div>
        </div>
        <button type="submit" className="btn btn-primary m-5">Submit</button>
    </form>
);
}

export default NewExpenseForm;