React中父组件获取自定义MUI DatePicker组件值的最优方案

你的核心问题是当前自定义组件将状态（选中的日期值）保存在组件内部，父组件无法直接访问多个实例的状态。解决方案是将状态提升到父组件，把MyDatePicker改成受控组件，由父组件统一管理所有实例的值。

步骤1：修改自定义DatePicker组件 #

移除组件内部的useState，改为通过props接收外部传入的value和onChange回调：

import { FormControl, 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";

// 更新Props定义，新增value和onChange
interface DatePickerProps {
  label: string;
  id: string;
  value: Dayjs | null;
  onChange: (value: 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.onChange}
          renderInput={(params) => <TextField id={props.id} {...params} size="small" />}
        />
      </FormControl>
    </LocalizationProvider>
  );
};

export default MyDatePicker;

步骤2：在父组件中管理所有DatePicker的值 #

父组件使用一个对象状态存储每个DatePicker的选中值，通过唯一id区分不同实例：

import React, { useState } from "react";
import MyDatePicker from "./MyDatePicker";
import { Dayjs } from "dayjs";
import { Button } from "@mui/material";

const MultiDatePickerForm = () => {
  // 用对象存储所有日期值，key为每个DatePicker的id
  const [dateValues, setDateValues] = useState<Record<string, Dayjs | null>>({
    date1: null,
    date2: null,
    date3: null,
    // 可提前初始化所有10个实例的id，或留空后续自动添加
  });

  // 统一处理所有DatePicker的变化事件
  const handleDateChange = (id: string, value: Dayjs | null) => {
    setDateValues(prev => ({
      ...prev,
      [id]: value
    }));
  };

  // 读取所有值（比如表单提交时）
  const handleSubmit = () => {
    console.log("所有选中的日期值：", dateValues);
    // 此处可将dateValues提交到后端或做其他业务处理
  };

  return (
    <div>
      {/* 手动渲染实例 */}
      <MyDatePicker
        id="date1"
        label="日期1"
        value={dateValues.date1}
        onChange={(value) => handleDateChange("date1", value)}
      />
      <MyDatePicker
        id="date2"
        label="日期2"
        value={dateValues.date2}
        onChange={(value) => handleDateChange("date2", value)}
      />
      {/* 重复添加date3到date10的实例 */}

      {/* 也可以用循环批量渲染（更简洁） */}
      {[...Array(10)].map((_, index) => {
        const id = `date${index + 1}`;
        return (
          <MyDatePicker
            key={id}
            id={id}
            label={`日期${index + 1}`}
            value={dateValues[id]}
            onChange={(value) => handleDateChange(id, value)}
          />
        );
      })}

      <Button variant="contained" onClick={handleSubmit} sx={{ mt: 2 }}>
        提交表单
      </Button>
    </div>
  );
};

export default MultiDatePickerForm;

核心逻辑说明 #

• 父组件通过dateValues对象统一管理所有DatePicker的状态，每个实例的id作为对象的键，对应的值就是该实例选中的日期。
• handleDateChange函数接收实例的id和新选中的值，更新父组件状态，确保每个实例的值独立存储。
• 需要读取所有值时，直接访问dateValues对象即可，比如表单提交时打印或提交到后端。

内容的提问来源于stack exchange，提问作者Sandeep Thomas