Использование формы реакции-хука с @mui/x-date-pickers v6

С пикетами даты MUI v5 я делал следующее, чтобы зарегистрировать ввод с помощью формы реагирования

<DatePicker
    ...date picker props
    renderInput = {(params) => {
        return (
            <TextField
                {...params}
                ...other text field props
                {...register("startDate", { required: true })}
            />
        );
    }}
/>

Теперь с MUI v6 метод renderInput отсутствует, поэтому я попробовал следующее:

<DatePicker
    ...date picker props
    slotProps = {{
        textField: {
            ...text field props,
            {...register("startDate", { required: true })}
        }
    }}
/>

Не удалось найти много документации по этому поводу? Любая помощь будет принята с благодарностью.

Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией
Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией
В JavaScript одним из самых запутанных понятий является поведение ключевого слова "this" в стрелочной и обычной функциях.
Концепция локализации и ее применение в приложениях React ⚡️
Концепция локализации и ее применение в приложениях React ⚡️
Локализация - это процесс адаптации приложения к различным языкам и культурным требованиям. Это позволяет пользователям получить опыт, соответствующий...
Навигация по приложениям React: Исчерпывающее руководство по React Router
Навигация по приложениям React: Исчерпывающее руководство по React Router
React Router стала незаменимой библиотекой для создания одностраничных приложений с навигацией в React. В этой статье блога мы подробно рассмотрим...
Массив зависимостей в React
Массив зависимостей в React
Все о массиве Dependency и его связи с useEffect.
1
0
248
2
Перейти к ответу Данный вопрос помечен как решенный

Ответы 2

Ответ принят как подходящий

Я смог заставить это работать с помощью контроллера

<Controller
    name = "startDate"
    control = {control}
    rules = {{ required: true }}
    defaultValue = {null}
    render = {({ field }) =>
        <DatePicker
            {...field}
            ...date picker props
            slotProps = {{
                textField: {
                    ...text field props
                }
            }}
        />
    }
/>

Если у кого-то есть другой способ заставить это работать без использования контроллера, сообщите мне.

У меня такая же проблема с формой реакции-хука 7.43.9 и @mui/x-date-pickers 6.3.1. После целого дня поисков был создан пользовательский компонент DateInput для моей формы.

import * as React from "react";

import {
    useController,
    useFormContext
} from "react-hook-form";

import { DatePicker } from "@mui/x-date-pickers";

interface IProps {
    label: string;
    name: string;
}

export const DateInput = ({ label, name }: IProps) => {
    const { control } = useFormContext();
    const { field } = useController({ control, name, defaultValue: null });
            
    return <DatePicker
        label = {label}
        maxDate = {new Date()}
        value = {field.value}
        onChange = {field.onChange}
        slotProps = {{
            textField: {
                ...{ readOnly: true }
            }
        }}
    />;
};

Другие вопросы по теме