reactjs - React - 日期输入值未更新为状态

Question

在我的 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，但这也不起作用。

如何在状态中更新新值？

注意:红色文字为当前数据库中的值。

Answer 1

您需要为 DateInput 组件中的输入字段添加 onChange 属性作为

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

请找到一个工作示例 here