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

Question

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

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

从我所看到的材料选择器 api 没有隐藏文本字段的道具，并且 DatePickerModal 不是一个独立的组件。

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

Answer 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