Material UI：TextField 闹钟更改为另一个图标答案

【问题标题】：Material UI: TextField Alarm Clock change to Another IconMaterial UI：TextField 闹钟更改为另一个图标
【发布时间】：2021-05-17 11:46:19
【问题描述】：

我有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图标中的闹钟功能？

有什么解决办法吗？

谢谢。

【问题讨论】：

标签： javascript html css reactjs

【解决方案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,
          },
        }}
      />

【讨论】：

这是基于 github.com/mui-org/material-ui/blob/master/packages/material-ui/… 的材料 UI 文档提供的代码
你能用 CSS 做点什么吗？可以把背景换成ExpandMoreIcon吗？因为您提供的代码不适用于向下箭头按钮。时间选择器的弹出窗口未在向下箭头按钮单击时弹出
尝试在 InputProps 对象中传递焦点值。我现在必须开始工作，无法为您进一步测试，对不起。祝你好运！

【解决方案2】：

相信你可以在 InputProps 下的 endAdornment 中添加 onClick 来调整功能。

像这样试试..

InputProps={{
          endAdornment: <ExpandMoreIcon style={{ color: "gray" }} onClick={FunctionToOpenTimePicker}/>,
        }}

或者试试

    InputProps={{
          endAdornment: <ExpandMoreIcon style={{ color: "gray" }}/>, onClick: () => FunctionToOpenTimePicker
        }}

我也知道我们在一些带有装饰的代码中使用了 onFocus/onBlur。

    InputProps={{
      endAdornment: <ExpandMoreIcon style={{ color: "gray" }}/>,
      onFocus: () => {if (!thing1) setThing2State(true)}, 
      onBlue: () => {if (!thing1) setThing2State(false)}
    }}

为了隐藏时钟图标，可能需要 CSS，如此处显示的示例中所示

Remove the arrow and cross that appears for TextField type=“time” material-ui React

【讨论】：

thing1 和 thing2state 是什么？我已将闹钟显示设置为无。我想要的功能是实现ExpandMoreIcon 的闹钟点击功能。能否提供完整的代码或信息？
我应该在FunctionToOpenTimePicker写什么？？
那些是你可以用你自己的替换的变量/函数的一次性名称。查看github.com/mui-org/material-ui/blob/master/packages/material-ui/… 似乎该组件将使用“focused”道具来确定是显示选择器还是隐藏选择器。这是我的建议。使用 useState 变量创建状态变量。这个变量应该是真或假。将变量传递给 TextField 组件，并使用我提供的 onFocus 和 onBlur 示例
所以 setThing2State 应该是第二个状态？？
我添加了一个额外的答案，应该为您提供所需的代码