设置日期选择器日期 - TypeScript 主题

本文将向您展示如何在 TypeScript 中使用 onClick 事件来设置日期选择器的日期。

import { useEffect, useRef } from "react";
import DatePicker from "react-datepicker";

function App() {
  const pickerRef = useRef(null);

  const handleOnClick = () => {
    if (pickerRef.current) {
      const today = new Date();
      (pickerRef.current as any).setDate(today);
    }
  };

  useEffect(() => {
    if (pickerRef.current) {
      const today = new Date();
      (pickerRef.current as any).setDate(today);
    }
  }, []);

  return (
    <>
      <button onClick={handleOnClick}>Set Today's Date</button>
      <DatePicker ref={pickerRef} />
    </>
  );
}

export default App;

在上面的代码中，我们首先引入了 react-datepicker 库和一些 React 钩子。接下来，我们创建了一个名为 App 的函数组件。我们声明一个 Ref 变量 pickerRef 来保存对日期选择器的引用。

我们定义了一个名为 handleOnClick 的函数，它将在按钮单击事件触发时执行。在该函数中，我们使用 Ref 来获取日期选择器的实例，并将其设置为当天日期。

接下来，我们使用 useEffect 钩子来在组件挂载时自动设置日期选择器的值。

最后，我们将按钮和 DatePicker 组件渲染到屏幕上，并将 Ref 传递给 DatePicker 组件以便在其他地方使用。

在这里，我们介绍了如何在 TypeScript 中使用 onClick 事件来设置日期选择器的日期。您可以根据您的具体应用程序需求进行修改和定制，以便更好地满足您的需求。