时间戳

首页 > 解决方案 > 反应：名称未通过 onChange()，e.target.name 在 DatePicker 上未定义

javascript - 反应：名称未通过 onChange()，e.target.name 在 DatePicker 上未定义

问题描述

我正在使用构建一个 MERN 堆栈应用程序 ( "react": "^16.14.0")，该应用程序具有使用 DatePicker ( "react-datepicker": "^4.2.1") 设置日期范围的表单。目前，正在选择日期的值，但名称未定义。This is throwing a TypeError and crashing the application when a date is selected. 如何将 e.target.name 设置为 startDate 和 endDate？

打字错误

react-dom.development.js:327 
Uncaught TypeError: Cannot read properties of undefined (reading 'name') 
  at onChange (index.js:55)

表单数据

const [formData, setFormData] = useState({
  startDate: '',
  endDate: '',
})

const {
  startDate,
  endDate,
} = formData

日期选择器

<DatePicker
  isClearable
  filterDate={(d) => {return new Date() > d}}
  placeholderText="Select Start Date"
  dateFormat="MMMM yyyy"
  selected={startDate}
  selectsStart
  startDate={startDate}
  endDate={endDate}
  onChange={(date) => onChange({ name: startDate, value: date })}
/>

onChange 函数

const onChange = (e) => {
  console.log(e) 
  setFormData({ ...formData, [e.target.name]: e.target.value })
}

控制台.log()

name: undefined
value: Tue Aug 03 2021 00:00:00 GMT-0400 (Eastern Daylight Time)

标签： javascriptreactjsformsdatepicker

解决方案

通常我们使用event.target.name. 但是，当我们使用任何组件库时，它取决于库开发人员如何让位于获取字段名称。所以你必须检查图书馆文件。

惊讶你还有另一种方式。只需要在 onChange 函数中传递字段名称 <DatePicker value={dateValue} onChange={(date) => onChange(name,date)} />

onChange=(name, date)=>{ console.log(name,date) }

推荐阅读