Блог

Главная - Вопросы по программированию - Реагировать: Имя не проходит через onChange(), e.target.name не определено в ДатаПикере

Реагировать: Имя не проходит через onChange(), e.target.name не определено в ДатаПикере

#javascript #reactjs #forms #datepicker

Вопрос:

Я использую приложение для создания стека MERN ( "react": "^16.14.0" ), которое имеет форму с использованием DatePicker ( "react-datepicker": "^4.2.1" ) для установки диапазона дат. В настоящее время выбирается значение для даты, но имя не определено. Это приводит к ошибке ввода и сбою приложения при выборе даты. Как мне установить e.target.name чтобы начать и закончить?

Ошибка типа

 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)

Ответ №1:

Причина, по которой это происходит, заключается в том, что вы на обмене не получаете никакого события, поэтому цель e.не определена. если вы посмотрите здесь:

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

Ответ №2:

Как правило, мы получаем имя поля с помощью event.target.name . Но в то время как мы используем любую библиотеку компонентов, это зависит от библиотеки, как разработчик библиотеки дал возможность получить имя поля. поэтому вам нужно проверить библиотечный документ.

Удивляюсь, что у тебя есть еще один способ. Просто нужно передать имя поля в функцию onChange <DatePicker value={dateValue} onChange={(date) => onChange(name,date)} />

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

Метки: ,