我不明白為什么我在使用 react-datepicker 時將 dob 的值作為 object

Question

當我控制台記錄 dob 的值時，它是 object 而不是字符串

首字母 state

const initialValues = {
    registrationForm: {
     
        dob: {
            elementType: 'date',
            elementConfig: {
                name: 'dob',
                required: true,
                placeholderText: 'Date of birth'
            },
            value: null,
        },
    },
   
}

state *

const [values, setValues] = useState(initialValues);

更新對象

export const updateObject = (oldObject, updatedProperties) => {
    return {
        ...oldObject,
        ...updatedProperties
    };
};

處理更改處理程序

  const handleChange = (event, inputIdentifier, config) => {
      
      
        const updatedRegistrationForm = updateObject(values.registrationForm, {
            [inputIdentifier]: updatedFormElement
        });

        setValues({registrationForm: updatedRegistrationForm);


    };

處理提交*

 const handleSubmit = (event) => {
        event.preventDefault()
        const formData = {};
        for (let formElementIdentifier in values.registrationForm) {
            formData[formElementIdentifier] = values.registrationForm[formElementIdentifier].value;
        }

        console.log(formData)
    };

for (let key in values.registrationForm) {
        formElementsArray.push({
            id: key,
            config: values.registrationForm[key]
        });
    }

形式

                 <form  onSubmit={handleSubmit}>
                
             
                            {
                                formElementsArray.slice(sliceStart, sliceNumber).map(({config, id}) => {
                         
                                    return <Input
                                        key={id}
                                        elementType={config.elementType}
                                        elementConfig={config.elementConfig}
                                        value={config.value}
                                        changed={(event) => handleChange(event, id)}/>

                                })
                            }


                </form>

輸入

const Input = ({
                   elementType,
                   elementConfig,
                   value,
                   changed,
                 
               }) => {
    let inputElement = null;

    switch (elementType) { 
        case ('date'):
            inputElement =
                <DatePicker
                    id={id
                    className='mb-3 form-control'
                    {...elementConfig}
                    selected={value}
                    onChange={changed}/>
            break;
      
    }
    

    return (

        <>
            {inputElement}
        </>


    );
};

export default Input;

當我控制台日志（Stringvale）時，我期待與此類似的東西

DOB：“2023-01-11T21：00：00.000Z”

但我得到了這個（一個對象）

任何幫助將不勝感激。

Answer 1

   <DatePicker
     id={id
     className='mb-3 form-control'
     {...elementConfig}
     selected={value}
     onChange={changed}/>

DatePicker 中的onChange返回日期 object。您可以使用任何日期格式化程序將日期 object 轉換為所需格式。

更新changed方法以接受日期 object，進行如下轉換。

const handleChange = (event, inputIdentifier, config) => {
  const updatedRegistrationForm = updateObject(values.registrationForm, 
    {
      [inputIdentifier]: updatedFormElement
    });

  if(inputIdentifier=="dob") {
    updatedFormElement.value=formatDate(date); //create some function to do the date formatting
  } else {
    updatedFormElement.value = event.target.value // for example
  // logic for non date inputs
  }

 setValues({registrationForm: updatedRegistrationForm);
};