如何使用按钮@material-ui/core 本机文本字段类型日期对话框以编程方式打开？答案

【问题标题】：How to programmatically open with button @material-ui/core native textfield type date dialog?如何使用按钮@material-ui/core 本机文本字段类型日期对话框以编程方式打开？
【发布时间】：2021-10-11 07:09:32
【问题描述】：

如何使用按钮以编程方式打开此@material-ui/core 原生文本字段类型日期对话框的对话框？

我已经调查过了从“@material-ui/pickers”导入 { DatePicker } 并认为这对我的应用程序来说太过分了，我在那里也遇到了一些问题

import { TextField } from "@material-ui/core"

<TextField type="date" defaultValue="2017-05-24"/> //how to open this programmatically
<Button onClick={() => {}}>Button That Opens The Date Dialog</Button>

我正在使用

"react": "^17.0.2",
"@material-ui/core": "^4.12.3",

感谢您的帮助

【问题讨论】：

标签： reactjs datepicker material-ui dialog textfield

【解决方案1】：

我会通过操作状态来做到这一点，以便按钮更改一些布尔值，然后触发对话打开。因此，更清楚的是，在 state 中有一些值，比如 dateOpened，最初设置为 false。让按钮中的 onClick 将这个值更新为相反的值，最初是这样的。然后有一个基于 dateOpened 值显示的 TextField。

const [dateOpened, setDateOpened] = useState(false);
return (
  <Button onClick={() => setDateOpened(() => (dateOpened ? false : true))}/>
    {
      dateOpened ? <TextField type="date" defaultValue="2017-05-24"/> : <div>Date not opened!</div>
    }
  }
);

?如果您以前没有遇到过运算符，则它是有条件的。然后，如果您再次单击该按钮，它将隐藏 TextField，因为 onClick 会将 dateOpened 从 true 更改为 false。

【讨论】：

谢谢，但不幸的是对话框默认关闭并且没有 open={true} 属性
如果我在答案中使用确切的代码，它不会对我关闭。还有其他东西可以覆盖 TextField 的行为吗？

【解决方案2】：

经过一番挖掘，似乎无法触发原生输入类型日期对话框

How to trigger mouse click event on react component to open date picker

但是可以从以下位置触发对话框从“@material-ui/pickers”导入 { DatePicker }

基于 t.smith 回答的组合解决方案谢谢

{!record.trash && (
  <Tooltip arrow title="Calendar">
    <Button
      disabled={record.trash}
      onClick={() => {
        setShow({
          ...show,
          ["datepicker_" + record.id]: true,
        })
      }}
    >
      <CalendarTodayIcon />
    </Button>
  </Tooltip>
)}
{show["datepicker_" + record.id] && (
  <DatePicker
    value={record.date}
    hidden={true}
    open={true}
    onChange={async (d) => {
      await updateRecord({
        ...record,
        date: d.toISOString(),
      })
    }}
    onClose={() => {
      setShow({
        ...show,
        ["datepicker_" + record.id]: false,
      })
    }}
  ></DatePicker>
)}

【讨论】：