如何将React Calendar选中的日期值传递给其他组件？

方案1：状态提升（推荐） #

预约按钮和Booking组件归属同一个父组件，将日期状态放到父组件管理是最直接的方式，父子组件都可以直接访问该状态：

第一步：修改父组件代码 #

假设你的父组件是ReservationContainer，代码如下：

import { useState } from 'react';
import Booking from './Booking';
import axios from 'axios';

function ReservationContainer() {
  // 将日期状态提到父组件统一管理
  const [selectedDate, setSelectedDate] = useState(new Date());

  // 预约按钮点击触发的请求方法
  const handleSubmitReservation = async () => {
    try {
      // 发起请求时直接使用selectedDate即可
      const res = await axios.post('/你的预订接口地址', {
        date: selectedDate,
        // 补充其他需要的请求参数
      });
      // 请求成功后的业务逻辑
      console.log('预约成功', res);
    } catch (err) {
      console.error('预约失败', err);
    }
  }

  return (
    <div>
      {/* 把状态和修改方法传给Booking组件 */}
      <Booking selectedDate={selectedDate} onDateChange={setSelectedDate} />
      {/* 你的预约按钮 */}
      <button onClick={handleSubmitReservation}>提交预约</button>
    </div>
  )
}

export default ReservationContainer;

第二步：修改Booking组件代码，适配父组件传的props #

function Booking({ selectedDate, onDateChange }) {
  const disabledDates = [
    new Date(2021, 8, 13),
    new Date(2021, 8, 16),
  ];
  console.log(selectedDate);
  
  return (
    <div className="App">
      <Calendar
          onChange={onDateChange}
          value={selectedDate}
          maxDetail="month"
          minDetail="month"
          tileDisabled={({date, view}) =>
          (view === 'month') && // 仅禁用月视图下的日期瓦片
          disabledDates.some(disabledDate =>
            (date.getFullYear() === disabledDate.getFullYear() &&
            date.getMonth() === disabledDate.getMonth() &&
            date.getDate() === disabledDate.getDate()) 
          )}
      />
    </div>
  );
}
export default Booking;

方案2：子组件通过回调传值（无需改动原有状态位置） #

如果你不想把状态迁移到父组件，也可以给Booking组件新增回调props，每次日期变化时将值同步给父组件存储：

第一步：修改Booking组件，新增回调触发逻辑 #

function Booking({ onDateUpdate }) {
  const [value, onChange] = useState(new Date());
  const disabledDates = [
    new Date(2021, 8, 13),
    new Date(2021, 8, 16),
  ];

  // 日期变化时同时更新本地状态+通知父组件
  const handleDateChange = (newDate) => {
    onChange(newDate);
    onDateUpdate?.(newDate);
  }

  console.log(value);
  
  return (
    <div className="App">
      <Calendar
          onChange={handleDateChange}
          value={value}
          maxDetail="month"
          minDetail="month"
          tileDisabled={({date, view}) =>
          (view === 'month') && // 仅禁用月视图下的日期瓦片
          disabledDates.some(disabledDate =>
            (date.getFullYear() === disabledDate.getFullYear() &&
            date.getMonth() === disabledDate.getMonth() &&
            date.getDate() === disabledDate.getDate()) 
          )}
      />
    </div>
  );
}
export default Booking;

第二步：父组件接收值并存储 #

import { useState } from 'react';
import Booking from './Booking';
import axios from 'axios';

function ReservationContainer() {
  const [selectedDate, setSelectedDate] = useState(new Date());

  const handleSubmitReservation = async () => {
    // 直接用存储的selectedDate发起请求
    await axios.post('/你的预订接口地址', { date: selectedDate });
  }

  return (
    <div>
      <Booking onDateUpdate={setSelectedDate} />
      <button onClick={handleSubmitReservation}>提交预约</button>
    </div>
  )
}

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