在我的 React (v16.3) 应用程序中,我使用 material-ui-pickers 库的 DatePicker 组件呈现日期选择器控件。该组件呈现一个 Material-UI TextField
成分。我想改变它,让它只呈现一个 Material-UI Input
没有 TextField
呈现的 chrome。
据我所知,可以使用 DatePickers TextFieldComponent
字段(底部的 here)来实现这一点,但我不知道如何使用该字段。
<DatePicker
id={name}
TextFieldComponent={...<HOW_TO> ...}
value={value}
onChange={this.handleChange}
disabled={isReadOnly} />
有什么办法吗?
更新:
通过找到正确的语法来使用而不是在没有 chrome(FormControl
、InputLabel
等)的情况下呈现,更进一步。但也不再打开 DatePicker。我必须以编程方式打开它吗?
<DatePicker
id={name}
TextFieldComponent={(props) => this.renderInput(props)}
value={value}
onChange={this.handleChange}
disabled={isReadOnly} />
这里是 renderInput():
renderInput(props: TextFieldProps): any {
return ( <Input
id={props.id}
value={props.value}
onChange={this.handleChange}
type={'text'}
disabled={props.disabled}
/> );
}
最佳答案
2020 年 10 月更新
@material-ui/pickers v3.x(最新)
要呈现 Input
而不是 TextField
组件,您可以将自定义组件传递给 DatePicker< 上的
.TextFieldComponent
属性
您需要将以下属性传递给 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 (next)
注意:v4 目前处于 alpha 阶段,因此 API 将来可能会发生变化。
在 V4 中,您可以在 DatePicker
上使用 renderInput
属性来自定义输入 ( see docs )。以下示例呈现 Material 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}
/>
);
}
关于javascript - 如何呈现 material-ui 输入控件而不是 materials-ui-datepicker 的文本字段,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/49899788/