React - значение ввода даты не обновлено до состояния
В моем приложении React я могу установить состояние и обновить базу данных для всех значений, кроме поля ввода даты. Мой код ниже:
import React, { Component } from 'react'
...
...
import DateInput from '../others/input/datePicker'
...
..
change = (what, e) => this.setState({ [what]: e.target.value })
changeDOB() {
this.setState({ age: document.getElementByClassNames("datePicker").value })
}
render() {
let {
...
...
age,
...
} = this.state
...
...
//date of birth
let stringAge = age.toString()
stringAge =
stringAge.substring(0, 4) +
'-' +
stringAge.substring(4, 6) +
'-' +
stringAge.substring(6, 8)
...
<DateInput
type = "date"
change = {this.changeDOB}
placeholder = {stringAge}
className = "datePicker"
/>
...
...
const mapStateToProps = store => ({
ud: store.User.user_details,
tags: store.User.tags,
session: store.User.session,
})
export default connect(mapStateToProps)(EditProfile)
export { EditProfile as PureEditProfile }
Вот код DateInput:
import React from 'react'
import { string, func, oneOf, bool } from 'prop-types'
const DateInput = ({ type, placeholder, ...props }) => (
<input
type = {type}
placeholder = {placeholder}
spellCheck = "false"
autoComplete = "false"
{...props}
/>
)
DateInput.defaultProps = {
type: 'date',
placeholder: '',
disabled: false,
}
DateInput.propTypes = {
type: oneOf(['date']),
placeholder: string.isRequired,
maxLength: string,
disabled: bool,
}
export default DateInput
Я пробовал this.change, как и другие поля, но это тоже не работает.
Как обновить новое значение в состоянии?
Примечание: красный текст - это значение, которое в настоящее время находится в базе данных.
Пожалуйста, включите также код компонента DateInput
не могли бы вы приставить document.getElementByClassNames("datePicker").value к функции changeDOB?
импортировать DateInput из "../others/input/datePicker"?
Ответы 2
Вы передаете все реквизиты входному компоненту, но вам нужно передать свою функцию обработчика событий в элемент ввода onchange или вместо этого попробовать onkeypress. Что-то вроде ниже. Вы также можете попробовать получить входное значение с событием вместо документа
Функция стрелки: нет необходимости в ручном связывании
changeDOB = (event) => {
this.setState({ age: event.target.value
})
}
<DateInput
type = "date"
change = {this.changeDOB}
placeholder = {stringAge}
className = "datePicker"
value = {this.state.age}
/>
<input
type = {type}
placeholder = {placeholder}
spellCheck = "false"
autoComplete = "false"
onchange = {(event) => props.change(event)}
value = {props.value}
{...props}
/>
Нормальная функция: требуется привязка и только в конструкторе
this.changeDOB = this.changeDOB.bind(this);
changeDOB(event){
this.setState({ age: event.target.value
})
}
<DateInput
type = "date"
change = {this.changeDOB}
placeholder = {stringAge}
className = "datePicker"
value = {this.state.age}
/>
<input
type = {type}
placeholder = {placeholder}
spellCheck = "false"
autoComplete = "false"
onchange = {props.change}
value = {props.value}
{...props}
/>
Спасибо. Как только я добавляю value= в поле ввода даты, средство выбора даты больше не меняет дату. Когда я меняю тип ввода на простое текстовое поле вместо DateInput, база данных обновляется. Значит, я что-то не так делаю. Я попробую завтра и обновлю, так как уже поздно. Спасибо за помощь
Не работает - состояние не обновляется, а также средство выбора даты не меняет дату при добавлении значения.
Вам необходимо добавить атрибут onChange для поля ввода в компоненте DateInput как
const DateInput = ({ type, placeholder, ...props }) => (
<input
type = {type}
placeholder = {placeholder}
spellCheck = "false"
autoComplete = "false"
onChange = {props.Onchange}
{...props}
/>
)
Тогда ваш основной компонент должен быть таким
changeDOB(e) {
this.setState({ age: e.target.value });
}
render() {
return(
<DateInput
type = "date"
Onchange = {this.changeDOB}
placeholder = {stringAge}
className = "datePicker"
/>
)
}
Найдите рабочий пример здесь
Спасибо. Я изменил код, но значение по-прежнему не обновляется в базе данных. Я, наверное, что-то не так делаю. Я вообще не могу понять. Завтра попробую и обновлю результаты.
Нет, состояние по-прежнему имеет то же значение. НО, если я изменю тип ввода на простое текстовое поле вместо DateInput, база данных будет обновлена. Так что я делаю что-то не так
@Harikrishnan - да, мне пришлось изменить getElementById - changeDOB = () => {this.setState({ age: document.getElementById("datePicker").value })} .. По какой-то причине getElementByClassName вызывало проблему. Также пришлось добавить value = {age} в DateInput
Кажется, вы не привязываете this.changeDOB в конструкторе. Добавьте this.changeDOB = this.changeDOB.bind (это); в конструкторе или используйте стрелочные функции. Также вы передаете this.changeDOB для изменения свойств в компоненте DateInput, так что DateInput - это библиотека или ваш пользовательский компонент?