введите дату вручную, набрав на клавиатуре

Question

• Я использую пакет календаря rc https://www.npmjs.com/package/rc-calendar
• когда я пытаюсь удалить 9 из 2019 и изменить его на 2018, он работает.
• но при удалении всей даты 15.01.2009 это не разрешается.
• Я пытаюсь вручную ввести дату, набрав на клавиатуре.
• все мои изменения даты находятся в методе handleChange (date)
• Можете ли вы сказать мне, как это исправить, чтобы в будущем я сам это исправил.
• Предоставление моей песочницы и фрагмента кода ниже.

https://stackblitz.com/edit/react-tch9tf?file=demo.js

class CalendarPage extends Component {
  constructor(props) {
    super(props);

    this.state = {
      date: new Date(),
      dateValue: '',
    };
    this.handleChange = this.handleChange.bind(this);
  }

  handleChange(date) {
    console.log(date);
    console.log(moment(date));
    if (moment(date) != 'Invalid date') {

      if (date != null) {
        console.log('valid Date');
        this.setState({
          date: date
        });
        this.setState({
          dateValue: moment(date).format('MM-DD-YYYY')
        });
      } else {
        this.setState({
          dateValue: ''
        });
      }
    }
  }



  render() {
    const calendar = (<Calendar />);
    return (
      <div>
        <DatePicker
          animation="slide-up"
          value={moment(this.state.date)}
          disabled={false}
          calendar={calendar}
          onChange={this.handleChange}
        >{
            ({ value }) => {
              return (
                <input value={this.state.dateValue} />
              )
            }
          }</DatePicker>
      </div>
    )
  }
}

Answer 1

Вы должны добавить обработчик для вашего компонента. Может быть, как:

<input value={this.state.dateValue} onChange={(e)=>{this.manualDateEntryFromInputHandler(e)}}/>

Затем в вашем классе реализуйте свой обработчик для этого onChange события:

manualDateEntryFromInputHandler(e) {
    let inputValue = e.target.value
    let dateValue = inputValue
    let date = moment(inputValue) 
    this.setState({date, dateValue})
}

Я, конечно, не знаю, чего вы хотите достичь, но, по крайней мере, это позволит вам вручную ввести дату.