Как получить доступ к переменной ловушки из импортированного функционального компонента?

Question

Как мне получить доступ к выбранной дате DateTimePicker из импортированного функционального компонента?

Вот функциональный компонент с DateTimePicker

import React, { useState } from "react";
import { DateTimePicker, MuiPickersUtilsProvider } from "@material-ui/pickers";
import DateFnsUtils from '@date-io/date-fns';

 export default function BasicDateTimePicker() {
     
    var date = new Date()
    const [selectedDate, handleDateChange] = useState(new Date(date.setMonth(date.getMonth() + 6)));

    return (
        <MuiPickersUtilsProvider utils={DateFnsUtils}>
            <DateTimePicker
                allowKeyboardControl
                ampm
                animateYearScrolling
                initialFocusedDate
                value={selectedDate}
                disablePast
                onChange={handleDateChange}
                format=" dd/MM/yyyy hh:mm:ss a "
                showTodayButton
            />
        </MuiPickersUtilsProvider>
    );
}

А вот фрагмент кода I хотите использовать selectedDate из

import React from 'react';
import ReactDOM from 'react-dom';
import './index.css';
import * as serviceWorker from './serviceWorker';
import BasicDateTimePicker from './components/BasicDateTimePicker';

ReactDOM.render(
  <React.StrictMode>
    <BasicDateTimePicker />
    <h1>{selectedDate}</h1>
  </React.StrictMode>,
  document.getElementById('root')
);

serviceWorker.unregister();

Я читал о реквизитах, но это помогает переносить переменную в противоположном направлении

Answer 1

React работает в однонаправленном потоке. Итак, вам нужно вызвать обработчик обратного вызова в качестве опоры для достижения этого.

Вы должны немного изменить свой код на это:

export default function BasicDateTimePicker({
  selectedDate,
  handleDateChange
}) {

  return (
      <MuiPickersUtilsProvider utils={DateFnsUtils}>
          <DateTimePicker
              allowKeyboardControl
              ampm
              animateYearScrolling
              initialFocusedDate
              value={selectedDate}
              disablePast
              onChange={handleDateChange}
              format=" dd/MM/yyyy hh:mm:ss a "
              showTodayButton
          />
      </MuiPickersUtilsProvider>
  );
}

import React from "react";
import ReactDOM from "react-dom";
import "./index.css";
import * as serviceWorker from "./serviceWorker";
import BasicDateTimePicker from "./components/BasicDateTimePicker";

const DateTime = () => {
  var date = new Date();
  const [selectedDate, handleDateChange] = useState(
    new Date(date.setMonth(date.getMonth() + 6))
  );

  return (
    <>
      <BasicDateTimePicker selectedDate={selectedDate} handleDateChange={handleDateChange} />
      <h1>{selectedDate}</h1>
    </>
  );
};

ReactDOM.render(
  <React.StrictMode>
    <DateTime />
  </React.StrictMode>,
  document.getElementById("root")
);

serviceWorker.unregister();