如何呈现 material-ui 输入控件而不是 materials-ui-datepicker 的文本字段

Question

在我的 React (v16.3) 应用程序中，我使用 material-ui-pickers 库的 DatePicker 组件呈现日期选择器控件。该组件呈现 Material-UI TextField component. I like to change this so it renders only a 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}
   /> );
 }

Answer 1

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（下一个）

注意：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}
    />
  );
}

如何呈现 material-ui 输入控件而不是 materials-ui-datepicker 的文本字段

How to render a material-ui input control instead a textfield for materials-ui-datepicker

javascript

typescript

reactjs

material-ui

react-tsx

@material-ui/pickers v3.x（最新）

@material-ui/pickers v4.0.0-alpha12（下一个）