Question

在我的React App中，我可以设置状态并为日期输入字段以外的所有值更新数据库。我的代码如下：

    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输入元素，或者尝试传递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}
  />

Answer 2

您需要在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

反应-日期输入值未更新为状态

2 个答案: