访问父组件中组件属性的正确/最佳方式答案

【问题标题】：Right/Best way of accessing component properties in parent component访问父组件中组件属性的正确/最佳方式
【发布时间】：2023-01-20 20:26:07
【问题描述】：

我实际上是 React 的新手。我已经自定义了 MUI DatePicker 组件以用于不同的形式

import { FormControl, FormLabel, TextField } from "@mui/material";
import { DatePicker, LocalizationProvider } from "@mui/x-date-pickers";
import { AdapterDayjs } from "@mui/x-date-pickers/AdapterDayjs";
import { Dayjs } from "dayjs";
import React from "react";

interface DatePickerProps {
  label: string;
  id:string;
}

const MyDatePicker = (props: DatePickerProps) => {
  const [value, setValue] = React.useState<Dayjs | null>(null);
  return (
    <LocalizationProvider dateAdapter={AdapterDayjs}>
      <FormControl sx={{ m: 1, width: "90%" }} size="small">
        <DatePicker
          label={props.label}
          value={value}
          onChange={(newValue) => {
            setValue(newValue);
          }}
          renderInput={(params) => <TextField id={props.id} {...params} size="small" />}
        />
      </FormControl>
    </LocalizationProvider>
  );
};

export default MyDatePicker;

因此，在我的任何组件中，我都可以立即使用该组件，而且它似乎工作正常。

但我的问题是，如果我们在使用该组件的同一个表单上有大约 10 个不同的位置，我该如何读取该 DatePicker 的值。

请帮忙

【问题讨论】：

标签： reactjs typescript

【解决方案1】：

惯用语是提升一个组件的状态——这正是 MUI 通过为您提供价值 setValue 道具已经在做的事情。尝试：

import { FormControl, FormLabel, TextField } from "@mui/material";
import { DatePicker, LocalizationProvider } from "@mui/x-date-pickers";
import { AdapterDayjs } from "@mui/x-date-pickers/AdapterDayjs";
import { Dayjs } from "dayjs";
import React from "react";

interface DatePickerProps {
  label: string;
  id:string;
  value: Dayjs | null;
  setValue: (newValue: Dayjs | null) => void;
}

const MyDatePicker = (props: DatePickerProps) => {
  return (
    <LocalizationProvider dateAdapter={AdapterDayjs}>
      <FormControl sx={{ m: 1, width: "90%" }} size="small">
        <DatePicker
          label={props.label}
          value={props.value}
          onChange={props.setValue}
          renderInput={(params) => <TextField id={props.id} {...params} size="small" />}
        />
      </FormControl>
    </LocalizationProvider>
  );
};

export default MyDatePicker;

const ComponentWhereYouWantToUseMyDatePicker() => {  
  const [value, setValue] = React.useState<Dayjs | null>(null);

  // Do with value whatever you want.  

  return (
    <MyDatePicker label="Label" id="Id" value={value} setValue={setValue} />
  )
}

【讨论】：

【解决方案2】：

您可以添加回调onDateChange，这样您就不必提升状态。

interface DatePickerProps {
  label: string;
  id: string;
  onDateChange: (newValue: Dayjs | null) => void;
}

const MyDatePicker = (props: DatePickerProps) => {
  const [value, setValue] = React.useState<Dayjs | null>(null);
  return (
    <LocalizationProvider dateAdapter={AdapterDayjs}>
      <FormControl sx={{ m: 1, width: "90%" }} size="small">
        <DatePicker
          label={props.label}
          value={value}
          onChange={(newValue) => {
            setValue(newValue);
            props.onDateChange(newValue);
          }}
          renderInput={(params) => (
            <TextField id={props.id} {...params} size="small" />
          )}
        />
      </FormControl>
    </LocalizationProvider>
  );
};

你可以像这样在你的组件中使用

const Component = () => {
  const handleDateChange = (newDate) => {
    console.log(newDate);
    // whatever you want to do with the value
  };

  return (
    <>
      <MyDatePicker
        id="someid"
        label="my label"
        onDateChange={handleDateChange}
      />
    </>
  );
};

【讨论】：