react-datetime组件粘贴日期后无法用删除/退格键修改的问题

问题场景 #

我使用react-datetime库的<Datetime>组件，代码如下：

import React from "react";
import Datetime from "react-datetime";
import moment from "moment";

import "./styles.css";

export default class App extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
        fromDateTime: "",
    };
  } 
  render() {
    return (
      <div className="App">
        <Datetime
          value={this.state.fromDateTime}
          dateFormat="YYYY-MM-DD"
          timeFormat="HH:mm"
          onChange={(momentObj) => {
            if (momentObj && momentObj.isValid && momentObj.isValid()) {
              const formattedDateTime = momentObj.format("YYYY-MM-DD HH:mm");
              this.setState({ fromDateTime: formattedDateTime });
            }
          }}
        />
      </div>
    );
  }
}

可以将日期2023-06-15 00:30粘贴到输入框中，但粘贴完成后，无法使用删除和退格键修改该日期。补充说明：本地环境中日历仅在点击输入框时打开，点击外部时关闭。

原因分析 #

• react-datetime组件的value属性原生期望接收moment对象，而非格式化后的字符串。
• 粘贴完整的有效日期字符串时，组件可以自动将其解析为合法的moment对象，因此能正常渲染；但当用删除/退格键修改时，输入框会出现不完整的日期片段（比如2023-06-15 00:或2023-06-），此时组件无法将这些无效字符串解析为合法moment对象，导致onChange回调不触发，state得不到更新，输入框内容看起来没有变化。

解决方案：将state存储为moment对象而非字符串 #

修改代码，把state中的fromDateTime改为存储moment对象，而非格式化后的字符串：

import React from "react";
import Datetime from "react-datetime";
import moment from "moment";

import "./styles.css";

export default class App extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
        // 初始化为null或空moment对象，而非字符串
        fromDateTime: null,
    };
  } 
  render() {
    return (
      <div className="App">
        <Datetime
          // 直接传入moment对象
          value={this.state.fromDateTime}
          dateFormat="YYYY-MM-DD"
          timeFormat="HH:mm"
          onChange={(momentObj) => {
            // 直接存储moment对象，无需提前格式化
            this.setState({ fromDateTime: momentObj });
          }}
        />
      </div>
    );
  }
}

额外说明 #

如果需要在其他场景（比如表单提交）使用格式化后的字符串，可在需要时调用momentObj.format()转换：

handleSubmit = () => {
  const formattedDate = this.state.fromDateTime 
    ? this.state.fromDateTime.format("YYYY-MM-DD HH:mm") 
    : "";
  // 此处执行提交逻辑
}

修改后，组件可以正确处理输入过程中的不完整日期片段，删除/退格键即可正常工作。

内容的提问来源于stack exchange，提问作者MsA