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

Question

我正在构建一个 MERN Stack 应用程序 ("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 设置为开始日期和结束日期？

TyperError

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

Console.log()

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

Answer 1

发生这种情况的原因是您的 onChange 未收到任何事件，因此 e.target 未定义。如果你看这里：

// Add the name explicitly as a string, cause you're trying to update a key by its name
onChange={(date) => onChange({ name: "startDate", value: date })}

onChange 正在接收带有名称和值键的对象。所以 onChange 函数应该是这样的：

const onChange = (item) => {
  console.log(item) 
  // should print something like { name: "startDate", value: "the date object" }
  setFormData({ ...formData, [item.name]: item.value })
}

Answer 2

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

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

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

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

React: Name not coming through onChange(), e.target.name is undefined on DatePicker

javascript

reactjs

forms

datepicker