react-datetime 如何通过点击按钮将时间设置为当前时间？

解决方案 #

你遇到的问题是 react-datetime 作为受控组件使用时，仅绑定了 value 属性，未配套添加 onChange 回调同步手动选择的状态，导致手动选择的值无法更新到本地状态中。

正确实现代码如下：

import { useState } from 'react';
import Datetime from 'react-datetime';

const YourComponent = () => {
  const [currentDateTime, setCurrentDateTime] = useState(null);

  // 处理手动选择时间的回调
  const handleTimeChange = (selectedMoment) => {
    // 组件返回参数为moment类型对象，可按需转换为Date对象或格式化字符串
    setCurrentDateTime(selectedMoment ? selectedMoment.toDate() : null);
  };

  return (
    <>
      <Datetime
        inputProps={{
          placeholder: "MM-DD-YYYY HH:mm",
          required: true,
        }}
        viewMode="time"
        value={currentDateTime}
        onChange={handleTimeChange} // 新增该行同步手动选择的时间
      />
      <Button 
        color="primary" 
        className="ml-1" 
        onClick={() => setCurrentDateTime(new Date())}
      >
        Immediate
      </Button>
    </>
  );
};

补充说明 #

• 最终时间值统一从 currentDateTime 读取即可，点击按钮设置、手动选择两种场景的时间都会自动同步到该状态。
• 如果你项目不需要Date类型存储，也可以在 handleTimeChange 中直接调用 selectedMoment.format('MM-DD-YYYY HH:mm') 存储格式化后的字符串。

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