使用React JS和moment在生日字段上编辑表单中的无效日期。

Question

我正在使用API在React JS中创建和恢复数据，但我不能编辑生日字段。当我使用键盘上的退格键时，在字段上显示消息。"无效日期". 我在用 moment 来转换（JavaScript内置JSON对象），从API与MongoDB，到默认的 DD/MM/YYYY. 它的显示是正确的，但我得到了这个问题，当我需要编辑。

//importing moment and Brazilian format

    import * as moment from 'moment'
    import 'moment/locale/pt-br'

//creating component and constructor

    export default class Member extends Component {
        constructor(props){ 
            super(props)
            this.stateHandlerName = this.stateHandlerName.bind(this)
            this.stateHandlerDtbirth = this.stateHandlerDtbirth.bind(this)

    ...

//declaring state in object currentMember

    this.state = {
            currentMember: {
                id: null,
                name: "",                
                dtbirth: new Date(),
    ...

//vinculing the state to the field

    stateHandlerDtbirth(e) {
        const dtbirth = e.target.value
        this.setState(prevState => ({
            currentMember: {
                ...prevState.currentMember,
                dtbirth: dtbirth
            }
        }))
    }
    ...

//Edit

    editMember() {
            MemberDataService.edit(
                this.state.currentMember.id,
                this.state.currentMember
            )
                .then(response => {
                    console.log(response.data)
                    this.setState({
                        message: "Member was edited successfully"
                    })
                })
                .catch(e => {
                    console.log(e)
                })
        }    
    ...

//Reindering page

    render() {
    const { currentMember } = this.state

    return (
        <div>
            { currentMember ? (
                <div className="edit-form">
                    <h4>Member</h4>
                    <form>
                       <div className="form-group">
                            <label htmlFor="name">Name</label>
                            <input type="text" 
                                   className="form-control" 
                                   id="name" 
                                   value={currentMember.name} 
                                   onChange={this.stateHandlerName} />
                        </div>    

                        <div className="form-group">
                            <label htmlFor="dtbirth">Birth date</label>
                            <input 
                                type="text" 
                                className="form-control" 
                                id="dtbirth" 
                                value={moment(currentMember.dtbirth).format('L')} 
                                onChange={this.stateHandlerDtbirth} />

                        </div>

Answer 1

我会把输入和输入中的评估日期作为一个单独的东西来保存。

否则

当我在键盘上使用退格键时，在字段上显示信息："无效日期"。 "无效日期"。

在日期字段中输入错误是很容易的。而且，当用户还在输入时，期待有效的日期是没有意义的。

看看这个例子。

我知道这里有很大的改进空间

class Input extends React.Component {

  constructor() {
    super();
    this.state = {
      dateValue: '',
      dateValueProcessed: null
    }
    this.handleEditInput = this.handleEditInput.bind(this);
  }

  handleEditInput({
    target: {
      value
    }
  }) {
    this.setState({
      dateValue: value,
      dateValueProcessed: moment(value, "DD/MM/YYYY")
    })
  }

  render() {
    return React.createElement('div', null, [React.createElement('input', {
        type: "text",
        value: this.state.dateValue,
        onChange: this.handleEditInput
      }, null),
      React.createElement('div', null, JSON.stringify(this.state))
    ])
  }
}

ReactDOM.render(
  React.createElement(Input, {

  }, null),
  document.getElementById("root"))

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.13.1/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.13.1/umd/react-dom.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.19.1/moment.min.js"></script>
<div id="root"></div>