使用react-datepicker时dob值为Date对象而非字符串的求助

react-datepicker 的 onChange 回调默认返回原生 Date 对象，而非你预期的ISO格式字符串，因此表单state中存储的是Date实例，控制台打印时自然显示为对象格式。

以下两种方案任选其一即可：

方案一：在handleChange中直接转换为字符串 #

修改handleChange函数，将Date对象转为ISO格式字符串后再存入state：

const handleChange = (selectedDate, inputIdentifier) => {
  // 注意：react-datepicker的onChange直接传递Date对象，不是合成事件
  const updatedFormElement = updateObject(values.registrationForm[inputIdentifier], {
    value: selectedDate ? selectedDate.toISOString() : null
  });
  
  const updatedRegistrationForm = updateObject(values.registrationForm, {
    [inputIdentifier]: updatedFormElement
  });

  setValues({ registrationForm: updatedRegistrationForm });
};

提示：react-datepicker的onChange和原生input的onChange逻辑不同，它直接把选中的Date对象作为参数传递，无需通过event.target.value取值。

方案二：提交表单时统一转换 #

如果希望state中保留Date对象，仅在提交时转为字符串，可修改handleSubmit：

const handleSubmit = (event) => {
  event.preventDefault()
  const formData = {};
  for (let formElementIdentifier in values.registrationForm) {
    const value = values.registrationForm[formElementIdentifier].value;
    // 仅对Date对象做转换，其他类型值直接保留
    formData[formElementIdentifier] = value instanceof Date ? value.toISOString() : value;
  }

  console.log(formData)
};

额外修复：Input组件语法错误 #

你的Input组件存在语法问题，id={id 缺少闭合括号，修正如下：

<DatePicker
  id={elementConfig.name} // 可根据需求设置正确的id值
  className='mb-3 form-control'
  {...elementConfig}
  selected={value}
  onChange={changed}/>

内容的提问来源于stack exchange，提问作者Galavu