reactjs - 如何将选定的日期（值）从反应日历传递到另一个组件？

Question

我正在尝试将所选日期传递给包含预订组件和预订按钮的组件。我需要为 axios 调用选择的日期。这是 Booking 组件的样子：

function Booking() {
  const [value, onChange] = useState(new Date());
  const disabledDates = [
    new Date(2021, 8, 13),
    new Date(2021, 8, 16),
  ];
  console.log(value);
  
  return (
    <div className="App">
      <Calendar
          onChange={onChange}
          value={value}
          maxDetail="month"
          minDetail="month"
          tileDisabled={({date, view}) =>
          (view === 'month') && // Block day tiles only
          disabledDates.some(disabledDate =>
            (date.getFullYear() === disabledDate.getFullYear() &&
            date.getMonth() === disabledDate.getMonth() &&
            date.getDate() === disabledDate.getDate()) 
          )}
      />
    </div>
  );
}
export default Booking;

Answer 1

您可以将状态移动到外部组件，并使其成为 Booking 组件的道具。

function Booking({value, setValue}) {
  
  const disabledDates = [
    new Date(2021, 8, 13),
    new Date(2021, 8, 16),
  ];
  console.log(value);
  
  return (
    <div className="App">
      <Calendar
          onChange={setValue}
          value={value}
          maxDetail="month"
          minDetail="month"
          tileDisabled={({date, view}) =>
          (view === 'month') && // Block day tiles only
          disabledDates.some(disabledDate =>
            (date.getFullYear() === disabledDate.getFullYear() &&
            date.getMonth() === disabledDate.getMonth() &&
            date.getDate() === disabledDate.getDate()) 
          )}
      />
    </div>
  );
}
export default Booking;

并在您的外部组件中执行以下操作：

function OuterComponent() {
  const [value, setValue] = useState(new Date());

  ...whatever else it needs to do
  
  return (<Booking value={value} setValue={setValue}/>
          ...whatever else it needs to contain
          );
}

Answer 2

您如何看待使用全局状态方法？使用 React Context 来集中状态和改变你状态的函数。

就像是：

// dateContext
import React, {craetContext, useState} from 'react'

export const DateContext = createContext({})

const DateProvider = ({children}) => {
  const [date, setDate] = useState(new Date())
  
  <DateContext.Provider value={date, setDate}>{children}<DateContext.Provider)
}

export default DateProvider;

// Wrap your components with DateProvider like: 

<DateProvider>
 <Booking />
 <OtherComponent />
</DateProvider>

// to use in your components you can do this way:

// Booking component

import React, {useContext} from 'react';
import {DateContext} from 'your_path';

function Booking() {

  const {date, setDate} = useContext(DateContext)
  
  const disabledDates = [
    new Date(2021, 8, 13),
    new Date(2021, 8, 16),
  ];
  console.log(value);
  
  return (
    <div className="App">
      <Calendar
          onChange={setDate}
          value={date}
          maxDetail="month"
          minDetail="month"
          tileDisabled={({date1, view}) =>
          (view === 'month') && // Block day tiles only
          disabledDates.some(disabledDate =>
            (date1.getFullYear() === disabledDate.getFullYear() &&
            date1.getMonth() === disabledDate.getMonth() &&
            date1.getDate() === disabledDate.getDate()) 
          )}
      />
    </div>
  );
}
export default Booking;

这只是一个代码片段。您需要以您的方式实现它。