在反應功能組件中將數據從子級發送到父級

Question

我正在嘗試將value狀態從子組件DateTimePicker.js發送到父組件Coaching.js 。 我收到以下錯誤： TypeError: parentCallback is not a function 。

家長：

 import React from "react"; import Typography from "@mui/material/Typography"; import DateTimePicker from "../components/DateTimePicker"; export default function Coaching() { const [date, setDate] = React.useState(); const handleCallback = (value) => { setDate(value); }; console.log(date); return ( <form> <Typography variant="h3" sx={{ marginBottom: "200px" }}> Coaching </Typography> <DateTimePicker parenCallback={handleCallback} /> </form> ); }

孩子：

 import * as React from "react"; import TextField from "@mui/material/TextField"; import AdapterDateFns from "@mui/lab/AdapterDateFns"; import LocalizationProvider from "@mui/lab/LocalizationProvider"; import DateTimePicker from "@mui/lab/DateTimePicker"; export default function BasicDateTimePicker({ parentCallback }) { const [value, setValue] = React.useState(new Date()); const handleChange = (newDateTime) => { setValue(newDateTime); parentCallback(value); }; return ( <LocalizationProvider dateAdapter={AdapterDateFns}> <DateTimePicker renderInput={(props) => <TextField {...props} />} label="DateTimePicker" value={value} onChange={handleChange} /> </LocalizationProvider> ); }

Answer 1

首先你在這個parenCallback={handleCallback}中缺少一個“t”

並且您正在調用父組件的函數名稱handleCallback而不是您傳遞給子組件parentCallback ！

因此，在您的孩子返回區域中，只需將handleCallback更改為parentCallback ：

return (
    <LocalizationProvider dateAdapter={AdapterDateFns}>
      <DateTimePicker
        renderInput={(props) => <TextField {...props} />}
        label="DateTimePicker"
        value={value}
        onChange={parentCallback}
      />
    </LocalizationProvider>
  );