antd框架中TimePicker的更改时间用法

Ant Design 是一个流行的 React UI 库，其中包含了许多实用的组件，包括 TimePicker 时间选择器。

要更改 TimePicker 的时间，可以使用其 `onChange` 属性。该属性用于指定当用户更改时间时触发的回调函数。回调函数的参数是一个 Moment.js 对象，表示当前的时间。

以下是一个示例，演示如何在 Ant Design 中使用 TimePicker 组件，并在用户更改时间时输出新的时间：

import React, { useState } from 'react';
import { TimePicker } from 'antd';
import moment from 'moment';
import 'antd/dist/antd.css';

function App() {
  const [time, setTime] = useState(moment());

  const handleTimeChange = (newTime) => {
    console.log('New time:', newTime.format('HH:mm:ss'));
    setTime(newTime);
  };

  return (
    <div>
      <TimePicker value={time} onChange={handleTimeChange} />
    </div>
  );
}

export default App;

在上面的示例中，我们首先导入了 `TimePicker` 组件和 Moment.js。然后，我们使用 `useState` 钩子来创建一个 `time` 状态变量，初始值为当前时间。

接着，我们定义了一个 `handleTimeChange` 回调函数，该函数用于在用户更改时间时更新 `time` 状态变量，并将新的时间输出到控制台。

最后，我们在 JSX 中使用 `TimePicker` 组件，并将其 `value` 属性设置为 `time` 状态变量，将其 `onChange` 属性设置为 `handleTimeChange` 回调函数。

运行上述代码，你就可以在页面上看到一个 TimePicker 组件了。当你更改时间时，控制台会输出新的时间。