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

Question

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

<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

我找到了一个没有引用的简单解决方案

在 KeyboardDatePicker 组件上使用 open 属性

想法是将值设置为 true onClick 和 false onClose

源代码:

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

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