javascript - Material UI：TextField 闹钟更改为另一个图标

Question

我有TextField。因为 Material UI 有Alarm Clock图标。

材料 UI 文档是这样的：

<form className={classes.container} noValidate>
  <TextField
    id="time"
    label="Alarm clock"
    type="time"
    defaultValue="07:30"
    className={classes.textField}
    InputLabelProps={{
      shrink: true,
    }}
    inputProps={{
      step: 300, // 5 min
    }}
  />
</form>

我设计的是这样的：

<TextField
  id="time"
  type="time"
  style={{
    width: "148px",
    marginLeft: 4,
    marginRight: 6,
    padding: "2px 0px 3px 6px",
  }}
  defaultValue="03:30"
  value={timeChange}
  onChange={handleTimeChange}
  className={classes.textField}
  color="secondary"
  InputProps={{
    disableUnderline: true,
    endAdornment: <ExpandMoreIcon style={{ color: "gray" }} />,
    classes: {
      input: classes.floatingLabelFocusStyle,
    },
    // className: classes.input,
  }}
/>;

并添加了一些CSS：

   input[type="time"]::-webkit-calendar-picker-indicator {
          background: none;
   }

我得到的是：

有没有一种方法可以让我ExpandMoreIcon在点击时表现得像闹钟一样并打开弹出窗口以显示时间选择器？

我不想显示闹钟图标。ExpandMoreIcon我只想要图标中的闹钟功能？

有什么解决办法吗。。

谢谢你。

标签： javascripthtmlcssreactjs

Answer 1

  const [displayPicker, setDisplayPicker] = React.useState(false);      

<TextField
        id="time"
        type="time"
        style={{
          width: '148px',
          marginLeft: 4,
          marginRight: 6,
          padding: '2px 0px 3px 6px',
        }}
        defaultValue="03:30"
        value={timeChange}
        onChange={handleTimeChange}
        focused={displayPicker}
        className={classes.textField}
        color="secondary"
        InputProps={{
          endAdornment: <ExpandMoreIcon style={{ color: 'gray' }} />,
          onFocus: () => setDisplayPicker(true),
          onBlur: () => setDisplayPicker(false),
          classes: {
            input: classes.floatingLabelFocusStyle,
          },
        }}
      />