如何从导入的功能组件访问钩子变量？

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>    );}这是我想使用 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();