如何通过renderInput将状态数据传递给DesktopDatePicker的输入组件

问题原因 #

1. DesktopDatePicker的renderInput回调会自动注入一组输入框必要属性（包含绑定好的日期值、事件回调、ref、label等），你当前完全忽略了这组参数，导致自定义的InputField无法和日期选择器联动
2. 若你需要对接Formik，无需单独维护本地useState状态，可以直接将选中值同步到Formik的字段状态中

修复方案 #

你可以直接通过renderInput传递注入参数实现联动，同时对接Formik的逻辑参考如下代码：

import React from 'react'
import { Input, Box, Typography } from '@mui/material'
import { useField } from 'formik'
import LocalizationProvider from '@mui/lab/LocalizationProvider';
import DesktopDatePicker from '@mui/lab/DesktopDatePicker';
import TextField from '@mui/material/TextField';
import AdapterDateFns from '@mui/lab/AdapterDateFns';
import InputField from '../InputField';

const DateField = ({ label, ...props }) => {
  const [field, meta, helpers] = useField(props)

  const handleChange = (newValue) => {
    // 同步值到Formik状态
    helpers.setValue(newValue);
  };

  return (
    <LocalizationProvider dateAdapter={AdapterDateFns}>
      <DesktopDatePicker
        label={label || "Date desktop"}
        inputFormat="MM/dd/yyyy"
        value={field.value || new Date('2021-12-25T21:11:54')}
        onChange={handleChange}
        {/* 重点：把renderInput接收的params全部传给InputField，包含绑定好的输入值、事件等 */}
        renderInput={(params) => <InputField {...params} name={props.name || 'date'} error={meta.touched && Boolean(meta.error)} helperText={meta.touched && meta.error} />}
      />
    </LocalizationProvider>
  )
}

export default DateField

补充说明 #

• 不需要手动把newValue传给输入框，DesktopDatePicker会自动处理好输入框的显示值，你只需要把renderInput拿到的params透传给输入组件即可
• 如果你的InputField是对MUI TextField的封装，透传params不会有兼容问题，要是封装时过滤了原生属性，需要确认把inputProps、InputProps、ref这些核心属性透传到内部的输入元素上

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