Как визуализировать элемент управления вводом material-ui вместо текстового поля для материалов-ui-datepicker
В моем приложении React (v16.3) я визуализирую элементы управления выбора даты с помощью компонента DatePicker библиотеки сборщики материалов. Этот компонент отображает компонент Material-UI TextField. Мне нравится это изменить, чтобы он отображал только Material-UI Input без хрома, отображаемого TextField.
Как я понял, это можно сделать с помощью поля DatePickers TextFieldComponent (здесь внизу), но я не мог понять, как использовать это поле.
<DatePicker
id = {name}
TextFieldComponent = {...<HOW_TO> ...}
value = {value}
onChange = {this.handleChangeEvent}
disabled = {isReadOnly} />
Есть идеи, как это сделать?
Обновлять:
Сделал еще один шаг, найдя правильный синтаксис для использования, а не его рендеринг без хрома (FormControl, InputLabel и т. д.). Но и DatePicker больше не открывается. Нужно ли открывать программно?
<DatePicker
id = {name}
TextFieldComponent = {(props) => this.renderInput(props)}
value = {value}
onChange = {this.handleChangeEvent}
disabled = {isReadOnly} />
А вот и renderInput ():
renderInput(props: TextFieldProps): any {
return ( <Input
id = {props.id}
value = {props.value}
onChange = {this.handleChangeEvent}
type = {'text'}
disabled = {props.disabled}
/> );
}
Я использую последние версии vnext material-ui и material-ui-pickers. Я не вижу ничего, что называется inputComponent. Только TextFieldComponent.
Понятно, что вы имеете в виду. Это именно то, что я пытаюсь сделать, но безуспешно. Он работает до такой степени, что он только отображает ввод, но теперь сборщик данных больше не отображается. Думаю, мне нужно открыть его грамматически. См. «Обновление».
Попробуйте добавить onClick = {props.onClick} к вашему компоненту Input.
![Безумие обратных вызовов в javascript [JS]](https://i.imgur.com/WsjO6zJb.png)
Ответы 1
Обновлено октябрь 2020 г.
@ material-ui / pickers v3.x (последняя версия)
Чтобы визуализировать Input вместо компонента TextField, вы можете передать пользовательский компонент в опору TextFieldComponent на DatePicker.
Вам нужно будет передать Input следующие реквизиты: value, onChange и onClick.
import React, { useState } from "react";
import { Input, TextFieldProps } from "@material-ui/core";
import { DatePicker } from "@material-ui/pickers";
import { MaterialUiPickersDate } from "@material-ui/pickers/typings/date";
export default function Demo() {
const [selectedDate, setSelectedDate] = useState<MaterialUiPickersDate>(
new Date()
);
const renderInput = (props: TextFieldProps): any => (
<Input
type = "text"
onClick = {props.onClick}
value = {props.value}
onChange = {props.onChange}
/>
);
return (
<DatePicker
label = "Basic example"
value = {selectedDate}
onChange = {setSelectedDate}
TextFieldComponent = {renderInput}
/>
);
}
@ material-ui / pickers v4.0.0-alpha12 (далее)
ПРИМЕЧАНИЕ: v4 в настоящее время находится на стадии альфа-тестирования, поэтому API может измениться в будущем.
В V4 вы используете опору renderInput на DatePicker для настройки ввода (см. документы). В следующем примере отображается материал ui Input вместо TextField.
import React, { useState } from "react";
import { Input, TextFieldProps } from "@material-ui/core";
import { DatePicker } from "@material-ui/pickers";
export default function Demo() {
const [selectedDate, setSelectedDate] = useState<Date | null>(new Date());
const renderInput = (props: TextFieldProps): any => (
<Input
type = "text"
inputRef = {props.inputRef}
inputProps = {props.inputProps}
value = {props.value}
onClick = {props.onClick}
onChange = {props.onChange}
endAdornment = {props.InputProps?.endAdornment}
/>
);
return (
<DatePicker
label = "Basic example"
value = {selectedDate}
onChange = {setSelectedDate}
renderInput = {renderInput}
/>
);
}
Песочница кода в данный момент возвращает ошибку
Спасибо за внимание! Этот ответ был написан в 2018 году, поэтому он относится к более старым версиям Material UI и Material UI Pickers. Демоверсию CodeSandbox необходимо перестроить с использованием текущих версий этих библиотек. Я временно удалил ссылку, пока работаю над ее обновлением.
@LukePeavey Вы когда-нибудь пытались понять, как это делается с текущим API? У меня много проблем с "@material-ui/pickers": "^4.0.0-alpha.9"
@Murcielago Я посмотрю на него в эти выходные и посмотрю, смогу ли я обновить его для текущих версий material-ui.
@Murcielago Я обновил свой ответ и добавил новую демонстрацию песочницы, в которой используется последняя версия обеих библиотек. Сообщите мне, работает ли это решение для вас.
@Murcielago Извините, я только что понял, что вы спрашивали об альфа версии 4. Завтра я посмотрю на v4 API и добавлю второй пример.
@Murcielago Я добавил пример, используя @ material-ui / pickers 4.0.0-alpha
Привет, @ Люк Пиви, извини, что побеспокоил тебя. Я пытаюсь этого добиться. Все работает нормально, за исключением того, что мой сборщик отображается не на своем месте. У меня есть эта ошибка: «Material-UI: опора anchorEl, предоставленная компоненту, недействительна». Есть ли у вас какие-либо идеи? Спасибо за вашу помощь
@NicolasOuldBouamama Не уверен, что могло быть причиной этого. Трудно сказать, не увидев вашего кода. Я бы предложил создать для этого новый вопрос. Я был бы рад взглянуть на это!
@LukePeavey спасибо за ваш ответ. Я только что обнаружил, что использование TextFieldComponent со «встроенным» вариантом вызывает проблему с v3.x, поэтому я изменил вариант на «диалог», и теперь все работает нормально. В любом случае спасибо
@NicolasOuldBouamama рад, что вы смогли это понять
Вы используете последнюю версию? material-ui @ следующий? Если последняя, попробуйте: inputComponent union: string | func Компонент, используемый для собственного ввода. Либо строка для использования элемента DOM, либо компонента.