Ant Design DatePicker 年份选择回显解决方案

Ant Design 的 a-date-picker 组件选择年份时，默认是不会回显的，即选择完年份后，输入框不会显示选择的年份。这是 antd 设计的默认行为。\n\n如果你需要在选择年份后回显选择的年份，可以通过设置 a-date-picker 的 defaultValue 或者 value 属性来实现。\n\n例如，使用 defaultValue 属性设置默认值：\n\njsx\nimport { DatePicker } from 'antd';\nimport moment from 'moment';\n\nconst App = () => {\n const handleChange = (date, dateString) => {\n console.log(dateString);\n };\n\n return (\n <DatePicker\n mode="year"\n defaultValue={moment('2022', 'YYYY')}\n onChange={handleChange}\n />\n );\n};\n\nexport default App;\n\n\n在上面的例子中，defaultValue 属性设置了默认值为 2022 年，选择年份后会回显选择的年份。\n\n或者，使用 value 属性控制输入框的值：\n\njsx\nimport { DatePicker } from 'antd';\nimport moment from 'moment';\n\nconst App = () => {\n const [value, setValue] = useState(null);\n\n const handleChange = (date, dateString) => {\n setValue(dateString);\n };\n\n return (\n <DatePicker\n mode="year"\n value={value ? moment(value, 'YYYY') : null}\n onChange={handleChange}\n />\n );\n};\n\nexport default App;\n\n\n在上面的例子中，使用 value 属性控制输入框的值，通过 useState 钩子来管理当前选择的年份。选择年份后，会回显选择的年份。