Material-ui 选择器：如何隐藏文本字段并使用按钮打开模式答案

【问题标题】：Material-ui picker: how to hide text field and open modal with buttonMaterial-ui 选择器：如何隐藏文本字段并使用按钮打开模式
【发布时间】：2020-02-01 13:25:14
【问题描述】：

我正在使用 material-ui pickers 的 3.2.6 版创建一个在移动设备和桌面设备上呈现不同的组件。

在桌面上，我正在显示一个带有文本输入的常规内联日期选择器，而对于移动设备，我只想显示一个打开模式的 dateicon 按钮

据我所知，material-picker api 没有隐藏文本字段的道具，并且 DatePickerModal 不是独立组件。

我看到了使用 ref 打开按钮的解决方案，但这似乎适用于旧版本的库，我无法让它工作。关于如何使用最新版本实现这一点的任何提示？是否有一些道具可以传递给 TextField 组件来隐藏它？

【问题讨论】：

标签： javascript reactjs material-ui

【解决方案1】：

您可以通过传递自定义组件来隐藏文本字段。会是这样的

function ControllingProgrammaticallyExample() {
  const [isOpen, setIsOpen] = useState(false);
  const [selectedDate, handleDateChange] = useState("2018-01-01T00:00:00.000Z");

  return (
    <div className={classes.container}>
      <Button onClick={() => setIsOpen(true)}> Open picker </Button>

      <DatePicker
        open={isOpen}
        onOpen={() => setIsOpen(true)}
        onClose={() => setIsOpen(false)}
        value={selectedDate}
        onChange={handleDateChange}
        TextFieldComponent={() => null}
      />
    </div>
  );

官方示例：https://material-ui-pickers.dev/guides/controlling-programmatically

【讨论】：

【解决方案2】：

只需使用 renderInput 方法

renderInput={
    hideInput ? 
        ({ inputRef, inputProps, InputProps }) => (
            <Box ref={inputRef}>
                {InputProps?.endAdornment}
            </Box>
        ) : 
        (params => <TextField {...params} />)
}

其中 hideInput 是布尔值，可用于在视图之间切换。

【讨论】：