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

您需要为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"
                />
          )
             }

请找一个有效的例子here

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