react-datetime:如何从按钮设置到now()的时间

Question

我正在使用react-datetime

​

​

我希望用户可以使用按钮Immediate轻松地将时间设置为当前时间。而不是手动选择当前时间。

我正在尝试下面的方法

const [currentDateTime, setcurrentDateTime] = useState(null);
<Datetime
    inputProps={{
        placeholder: "MM-DD-YYYY HH:mm",
        required: true,
    }}
    viewMode="time"
    value={currentDateTime} <--- THE PROBLEM WITH THIS IS, IT DOES NOT SET THE SELECTED DATETIME.
/>
<Button color="primary" className="ml-1" onClick={() => setcurrentDateTime(new Date())}>
    {"Immediate"}
</Button>

为了使用我正在使用的value={currentDateTime}的Immediate按钮值。BUt这不允许我使用选定的值

如何做到这一点。当我按下Immediate按钮时有new Date()值。并在选择datetime时使用selected值

Answer 1

之所以会发生这种情况，是因为您尚未向Datetime添加onChange事件

const [currentDateTime, setcurrentDateTime] = useState(null);

  return (
    <>
      <Datetime
        inputProps={{
          placeholder: "MM-DD-YYYY HH:mm",
          required: true
        }}
        viewMode="time"
        value={currentDateTime}
        onChange={setcurrentDateTime} // <--- You need to add onChange 
      />
      <Button
        color="primary"
        className="ml-1"
        onClick={() => setcurrentDateTime(new Date())}
      >
        {"Immediate"}
      </Button>
    </>
  );

检出此CodeSandbox：

​

​