在Ant Design中,DatePicker组件有一个onChange事件,可以在选择年份时触发。我们可以使用该事件来实现改变年份选择的功能。
下面是一个代码示例:
import React, { useState } from 'react';
import { DatePicker } from 'antd';
const App = () => {
const [selectedYear, setSelectedYear] = useState(null);
const handleYearChange = (date, dateString) => {
const year = date.year();
setSelectedYear(year);
};
return (
{selectedYear && Selected year: {selectedYear}
}
);
};
export default App;
在上面的代码中,我们使用了Ant Design的DatePicker组件,并设置了mode为"year",以便只选择年份。
当选择年份时,handleYearChange函数会被触发,并从DatePicker的参数中获取到选中的年份。然后,我们使用useState来更新selectedYear状态,以便在页面上显示选中的年份。
最后,在页面上显示选中的年份。
这样,当选择年份时,会触发handleYearChange函数,更新selectedYear状态,并在页面上显示选中的年份。