React新手求教：如何用react-calendar-pane展示选中的日历日期？

嘿，我来帮你搞定这个需求！作为React新手，用create-react-app配合react-calendar-pane实现选中日期展示其实超简单，咱们一步步来：

第一步：修正依赖导入问题 #

你代码里有重复导入的错误，先把多余的import date from 'react-calendar-pane';删掉，确保依赖导入正确：

import Calendar from 'react-calendar-pane';
import moment from 'moment';
import { useState } from 'react'; // 别忘了导入useState钩子

第二步：用状态管理选中的日期 #

在App组件里，用React的useState钩子来保存用户选中的日期，这样选中日期时页面能自动更新：

function App() {
  // 初始化状态，默认可以设为null（未选中）或者当前日期
  const [selectedDate, setSelectedDate] = useState(null);

第三步：处理日期选中事件 #

给Calendar组件绑定onDateChange事件，当用户点击日历上的日期时，把选中的日期更新到状态里：

// 日期选中的回调函数
  const handleDateSelect = (date) => {
    // 这里的date是moment对象，直接存到状态里就行
    setSelectedDate(date);
  };

第四步：在日历上方展示选中日期 #

在Calendar组件上方加一个区域，根据状态显示选中的日期，用moment格式化让显示更友好：

return (
    <div className="App">
      {/* 显示选中的日期 */}
      <div style={{ marginBottom: '20px', padding: '10px', borderBottom: '1px solid #eee' }}>
        {selectedDate 
          ? `已选中：${selectedDate.format('YYYY-MM-DD')}` 
          : '请选择一个日期'}
      </div>
      {/* 日历组件，绑定事件处理函数 */}
      <Calendar 
        onDateChange={handleDateSelect}
        // 设置默认显示的月份，比如当前月
        date={moment()}
      />
    </div>
  );
}

export default App;

小提示 #

• 如果你想默认选中当前日期，把useState的初始值改成moment()就行
• react-calendar-pane返回的date是moment实例，你可以用format方法自定义日期格式，比如'YYYY年MM月DD日'
• 确保已经安装了所有依赖：运行npm install react-calendar-pane moment（如果还没装的话）

这样就能完美实现你想要的功能啦！用户选中日期后，上方会立刻显示对应的日期~

内容的提问来源于stack exchange，提问作者T.Doe