单击输入字段时如何打开 mui KeyboardDatePicker 对话框

Question

目前发生的情况是，日期选择器仅在您单击日历图标时打开，但我需要它在单击输入字段和单击日历图标时打开。我发现有一个 onclick 道具，但我不知道如何添加该功能来触发对话框打开。这是我的代码

<MuiPickersUtilsProvider utils={DateFnsUtils}>
  <KeyboardDatePicker
    variant="inline"
    fullWidth
    margin="normal"
    format={dateFormat}
    KeyboardButtonProps={{
      "aria-label": "change date",
    }}
    autoOk
    name={field.name}
    value={field.value || null}
    helperText={showError && error}
    error={Boolean(showError)}
    onClose={handleTouch}
    onChange={handleChange}
    onTouchEnd={handleTouch}
    onBlur={handleTouch}
    onClick={}
    PopoverProps={{
      anchorOrigin: { horizontal: "left", vertical: "bottom" },
      transformOrigin: { horizontal: "left", vertical: "top" },
    }}
    {...other}
  />
</MuiPickersUtilsProvider>

Answer 1

我找到了一个没有参考文献的简单解决方案

在组件上使用openpropKeyboardDatePicker

这个想法是将值设置为 trueonClick和 falseonClose

源代码 ：

 setPickerStatus = (status: boolean) => {
    this.setState({
      open: status
    });
  };

  render() {
    return (
      <KeyboardDatePicker
        onClick={() => this.setPickerStatus(true)}
        onClose={() => this.setPickerStatus(false)}
        open={this.state.open}
        ...
      />
    );
  }