如何从其他组件获取Datepicker组件的日期值？

Great question! When you need to access the checkInDate and checkOutDate states from your Datepick component in other parts of your React app, there are three common, reliable approaches to choose from depending on your app's structure. Let's walk through each with code examples tailored to your component:

1. State Lifting (状态提升) #

This is React's go-to pattern for sharing state between components. The idea is to move the state from the child Datepick component up to a common parent component, then pass down the state and state updaters as props. This keeps your data flow predictable and easy to debug.

Step 1: Update the Parent Component #

Move the date states to a parent component that renders both Datepick and any other components that need the dates:

import { useState } from 'react';
import Datepick from './Datepick';
import AnotherComponent from './AnotherComponent'; // Your other component

function ParentComponent() {
  const [checkInDate, setCheckInDate] = useState(null);
  const [checkOutDate, setCheckOutDate] = useState(null);

  // Handle date changes from Datepick
  const handleDateUpdate = (type, date) => {
    if (type === 'checkIn') {
      setCheckInDate(date);
      setCheckOutDate(null); // Maintain your original logic to clear check-out when check-in changes
    } else if (type === 'checkOut') {
      setCheckOutDate(date);
    }
  };

  return (
    <div>
      {/* Pass the state and update handler to Datepick */}
      <Datepick 
        checkInDate={checkInDate}
        checkOutDate={checkOutDate}
        onDateUpdate={handleDateUpdate}
      />
      {/* Pass the dates to your other component */}
      <AnotherComponent checkIn={checkInDate} checkOut={checkOutDate} />
    </div>
  );
}

Step 2: Modify the Datepick Component #

Update Datepick to use the props from the parent instead of its own internal state:

function Datepick({ checkInDate, checkOutDate, onDateUpdate }) { 
  const handleCheckInDate = (date) => { 
    onDateUpdate('checkIn', date); 
  }; 

  const handleCheckOutDate = (date) => { 
    onDateUpdate('checkOut', date); 
  }; 

  return ( 
    <div className=""> 
      <div className="flex-row"> 
        <div> 
          <label>initial date</label> 
          <DatePicker 
            locale="es" 
            selected={checkInDate} 
            onChange={handleCheckInDate} 
            dateFormat="dd/MM/yyyy" 
          /> 
        </div> 
        <div> 
          <label>final date</label> 
          <DatePicker 
            selected={checkOutDate} 
            onChange={handleCheckOutDate} 
            minDate={checkInDate} 
            dateFormat="dd/MM/yyyy" 
          /> 
        </div> 
      </div> 
    </div> 
  ); 
} 
export default Datepick;

Best for: Shallow component trees where you don't have to pass props through multiple layers.

2. React Context (全局状态上下文) #

If you need access to the date states in many components across different parts of your app (or deep in the component tree), React Context eliminates the hassle of "prop drilling". It lets you share state globally without passing props down every level.

Step 1: Create a Date Context #

First, make a context file to hold your date state and updaters:

// DateContext.js
import { createContext, useContext, useState } from 'react';

const DateContext = createContext();

// Provider component that wraps your app (or part of it)
export function DateProvider({ children }) {
  const [checkInDate, setCheckInDate] = useState(null);
  const [checkOutDate, setCheckOutDate] = useState(null);

  const updateCheckInDate = (date) => {
    setCheckInDate(date);
    setCheckOutDate(null); // Keep your original logic
  };

  const updateCheckOutDate = (date) => {
    setCheckOutDate(date);
  };

  return (
    <DateContext.Provider 
      value={{
        checkInDate,
        checkOutDate,
        updateCheckInDate,
        updateCheckOutDate
      }}
    >
      {children}
    </DateContext.Provider>
  );
}

// Custom hook to easily access the context
export function useDate() {
  return useContext(DateContext);
}

Step 2: Wrap Your App with the Provider #

In your root component (like App.js), wrap everything that needs access to the date state:

import { DateProvider } from './DateContext';
import Datepick from './Datepick';
import AnotherComponent from './AnotherComponent';

function App() {
  return (
    <DateProvider>
      <Datepick />
      <AnotherComponent />
      {/* Any other components that need the dates */}
    </DateProvider>
  );
}

Step 3: Update Datepick to Use the Context #

Modify Datepick to pull state and updaters from the context instead of local state:

import { useDate } from './DateContext';

function Datepick() { 
  const { checkInDate, checkOutDate, updateCheckInDate, updateCheckOutDate } = useDate();

  return ( 
    <div className=""> 
      <div className="flex-row"> 
        <div> 
          <label>initial date</label> 
          <DatePicker 
            locale="es" 
            selected={checkInDate} 
            onChange={updateCheckInDate} 
            dateFormat="dd/MM/yyyy" 
          /> 
        </div> 
        <div> 
          <label>final date</label> 
          <DatePicker 
            selected={checkOutDate} 
            onChange={updateCheckOutDate} 
            minDate={checkInDate} 
            dateFormat="dd/MM/yyyy" 
          /> 
        </div> 
      </div> 
    </div> 
  ); 
} 
export default Datepick;

Step 4: Access Dates in Other Components #

Use the useDate hook to get the dates anywhere in your app:

import { useDate } from './DateContext';

function AnotherComponent() {
  const { checkInDate, checkOutDate } = useDate();

  return (
    <div>
      <p>Check-in Date: {checkInDate?.toLocaleDateString('es-ES')}</p>
      <p>Check-out Date: {checkOutDate?.toLocaleDateString('es-ES')}</p>
    </div>
  );
}

Best for: Large apps or when multiple components (across different layers) need access to the date state.

3. Callback Props (回调函数Props) #

If you only need to notify a parent component when the dates change (and don't want to lift the entire state), you can pass callback functions as props to Datepick. This lets Datepick keep its internal state but share updates with the outside.

Step 1: Modify Datepick to Accept Callbacks #

Update Datepick to trigger the passed callbacks when dates change:

function Datepick({ onCheckInChange, onCheckOutChange }) { 
  const [checkInDate, setCheckInDate] = useState(null); 
  const [checkOutDate, setCheckOutDate] = useState(null); 

  const handleCheckInDate = (date) => { 
    setCheckInDate(date); 
    setCheckOutDate(null); 
    // Trigger the callback if provided
    if (onCheckInChange) onCheckInChange(date);
  }; 

  const handleCheckOutDate = (date) => { 
    setCheckOutDate(date); 
    // Trigger the callback if provided
    if (onCheckOutChange) onCheckOutChange(date);
  }; 

  // Rest of your component remains the same
  return ( 
    <div className=""> 
      <div className="flex-row"> 
        <div> 
          <label>initial date</label> 
          <DatePicker locale="es" selected={checkInDate} onChange={handleCheckInDate} dateFormat="dd/MM/yyyy" /> 
        </div> 
        <div> 
          <label>final date</label> 
          <DatePicker selected={checkOutDate} onChange={handleCheckOutDate} minDate={checkInDate} dateFormat="dd/MM/yyyy" /> 
        </div> 
      </div> 
    </div> 
  ); 
} 
export default Datepick;

Step 2: Use the Callbacks in the Parent #

In your parent component, capture the date updates and pass them to other components:

import { useState } from 'react';
import Datepick from './Datepick';
import AnotherComponent from './AnotherComponent';

function ParentComponent() {
  const [checkIn, setCheckIn] = useState(null);
  const [checkOut, setCheckOut] = useState(null);

  return (
    <div>
      <Datepick 
        onCheckInChange={setCheckIn} 
        onCheckOutChange={setCheckOut} 
      />
      <AnotherComponent checkIn={checkIn} checkOut={checkOut} />
    </div>
  );
}

Best for: Smaller apps or when you want Datepick to maintain control over its internal state but still share updates.

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