我正在使用 MUI timePicker，但我无法在其中选择分钟。我一选择时间就关门了。如何解决这个问题？

Question

在下面分享我的代码片段：

<DesktopTimePicker
      orientation="portrait"
      value={value ?? null}
      onChange={handleDateChange}
      renderInput={(params) => (
        <TextField
          {...params}
          variant="standard"
          onBlur={onBlur}
          fullWidth
          sx={{ m: 1.5 }}
        />
      )}
    />

这是我处理 timeChange 的函数，

const handleDateChange = (date) => {
    onValueChange(date);
  };

如何解决这个问题？

Answer 1

这是因为当您更改小时时它会更改状态，这会导致页面重新呈现并关闭选择器。

您应该在选择器上使用 onAccept 属性，因为这是用户完成选择的时间。 但在 timePicker 的情况下，当用户输入时间时，不会调用 onAccept 你可以尝试我的解决方法：

onOpen={() => setWasOpened(true)}
onClose={() => setWasOpened(false)}
onAccept={ (newValue) => { //called when picker is changed, BUT not when the user types the time
     if (handleOnChange && !isNaN(new Date(newValue))) { //also add a checker if the date is valid (Option 1)
        handleOnChange(newValue ? dayjs(newValue) : null);
     }
  },
  onChange={(newValue, context) => { //called when picker is changed, AND user type the time
     if (handleOnChange && context.validationError == null) //also add a checker if the date is valid (Option 1) {
         handleDateChange(newValue ? dayjs(newValue) : null);
     }
 }},

然后在handleDateChange上，检查选择器是否打开，因为当用户在选择器上选择时间时，它会被调用两次。:

const handleDateChange = (date) => {
        if (!wasOpened) { //it means the user typed the time
            handleOnChange(date);
        }
    };