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

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({&nbsp; selectedDate,&nbsp; handleDateChange}) {&nbsp; return (&nbsp; &nbsp; &nbsp; <MuiPickersUtilsProvider utils={DateFnsUtils}>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <DateTimePicker&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; allowKeyboardControl&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; ampm&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; animateYearScrolling&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; initialFocusedDate&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; value={selectedDate}&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; disablePast&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; onChange={handleDateChange}&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; format=" dd/MM/yyyy hh:mm:ss a "&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; showTodayButton&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; />&nbsp; &nbsp; &nbsp; </MuiPickersUtilsProvider>&nbsp; );}import React from "react";import ReactDOM from "react-dom";import "./index.css";import * as serviceWorker from "./serviceWorker";import BasicDateTimePicker from "./components/BasicDateTimePicker";const DateTime = () => {&nbsp; var date = new Date();&nbsp; const [selectedDate, handleDateChange] = useState(&nbsp; &nbsp; new Date(date.setMonth(date.getMonth() + 6))&nbsp; );&nbsp; return (&nbsp; &nbsp; <>&nbsp; &nbsp; &nbsp; <BasicDateTimePicker selectedDate={selectedDate} handleDateChange={handleDateChange} />&nbsp; &nbsp; &nbsp; <h1>{selectedDate}</h1>&nbsp; &nbsp; </>&nbsp; );};ReactDOM.render(&nbsp; <React.StrictMode>&nbsp; &nbsp; <DateTime />&nbsp; </React.StrictMode>,&nbsp; document.getElementById("root"));serviceWorker.unregister();