如何呈现材料 UI 输入控件而不是材料 UI 日期选择器的文本字段

Posted 2023-02-22

【中文标题】如何呈现材料 UI 输入控件而不是材料 UI 日期选择器的文本字段

【英文标题】：How to render a material-ui input control instead a textfield for materials-ui-datepicker

【发布时间】：2018-09-28 16:48:47

【问题描述】：

在我的 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
   /> );
 

【问题讨论】：

您使用的是最新版本吗？材料-ui@下一个？如果最新，请尝试： inputComponent union: string | func 用于本机输入的组件。使用 DOM 元素或组件的字符串。

我使用最新的 vnext material-ui 和 material-ui-pickers。我看不到任何名为“inputComponent”的东西。只有'TextFieldComponent'。

明白你的意思。这正是我试图做的，但没有成功。让它运行到它只呈现输入但现在不再显示数据选择器的地步。我想我需要按语法打开它。见“更新”。

尝试将onClick=props.onClick 添加到您的Input 组件中。

【参考方案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)。以下示例渲染材质 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 我更新了我的答案并添加了一个使用两个库的最新版本的新沙盒演示。让我知道此解决方案是否适合您。