AntD DatePicker：如何在const onChange中返回变量及问题排查

1. 如何在const类型的onChange函数中获取/传递选中的日期值？ #

你当前试图通过全局变量存储值的方式不符合React的设计逻辑，正确的做法是利用React的**状态（State）**来管理组件内的可变数据。如果需要在组件外部获取该值，可以通过props传递回调，或借助ref暴露方法（新手优先掌握状态基础用法）。

基础实现（组件内部管理+传递给父组件） #

import React, { useState, useCallback } from 'react'
import { DatePicker } from 'antd';

const MonthPicker = ({ onMonthChange }) => {
  // 用useState存储选中的月份
  const [selectedMonth, setSelectedMonth] = useState("");

  const onChange = useCallback((date, dateString) => {
    console.log(dateString);
    // 更新组件内部状态
    setSelectedMonth(dateString);
    // 如果需要把值传给外部组件，调用传入的回调函数
    if (onMonthChange) {
      onMonthChange(dateString);
    }
  }, [onMonthChange]);

  // 组件内部其他地方要获取值，直接用selectedMonth即可
  const getCurrentMonth = () => selectedMonth;

  return (
    <>
      <DatePicker onChange={onChange} picker="month" />
    </>    
  )
}

export default MonthPicker

外部直接获取值的方式（用ref暴露方法） #

如果一定要做类似原代码中monthval的外部取值逻辑，可借助forwardRef和useImperativeHandle：

import React, { useState, useCallback, useImperativeHandle, forwardRef } from 'react'
import { DatePicker } from 'antd';

const MonthPicker = forwardRef((props, ref) => {
  const [selectedMonth, setSelectedMonth] = useState("");

  const onChange = useCallback((date, dateString) => {
    console.log(dateString);
    setSelectedMonth(dateString);
  }, []);

  // 暴露给外部的取值方法
  useImperativeHandle(ref, () => ({
    monthval: () => selectedMonth
  }));

  return (
    <>
      <DatePicker onChange={onChange} picker="month" />
    </>    
  )
})

export default MonthPicker

父组件中使用：

// 父组件内
const monthPickerRef = useRef(null);

// 点击按钮获取值
<button onClick={() => console.log(monthPickerRef.current.monthval())}>获取选中月份</button>
<MonthPicker ref={monthPickerRef} />

2. 当前代码存在的问题 #

• 全局变量的副作用：全局变量var a会被所有MonthPicker组件实例共享，一旦复用组件，不同实例的状态会互相干扰，导致数据混乱。
• 违反React单向数据流：React组件依赖自身状态或props管理数据，全局变量脱离了React的状态追踪机制，变量更新后组件不会自动重新渲染。
• onChange返回值无效：Ant Design的DatePicker的onChange回调不会使用你的返回值，代码里的return a = dateString仅完成赋值操作，返回值没有任何实际用途。
• 变量声明不规范：使用var容易引发变量提升、作用域污染问题，推荐用let或const替代。

内容的提问来源于stack exchange，提问作者theshewaspretty