将材料-UI输入式图标仅在选择时可见？

Question

代码：

<TextField
  className={classes.margin}
  id="input-with-icon-textfield"
  label="TextField"
  InputProps={{
    startAdornment: (
      <InputAdornment position="start">
        <AccountCircle />
      </InputAdornment>
    )
  }}
/>

我希望使用材料-UI道具的干净解决方案。

我发布此信息后立即实现了解决方案：

https：//codesandbox.io/s/material-demo-w385h

Answer 1

IconAdornment

时包含我们的

InputProps

。

isSelected === true

：

OnFocus

和

setIsSelected(true)

：

OnBlur

setIsSelected(false)

我使用Onblur/onfocus设置状态的效果少于Steller的结果，似乎Onblur在每种情况下都没有被调用，因此我通过查看MUI类解决了这一点。

  const [isSelected, setIsSelected] = useState(false);

  const iconAdornment = isSelected
    ? {
        startAdornment: (
          <InputAdornment position="start">
            <AccountCircle />
          </InputAdornment>
        )
      }
    : {};

  return (
    <TextField
      className={classes.margin}
      id="input-with-icon-textfield"
      label="TextField"
      InputProps={iconAdornment}
      onFocus={e => setIsSelected(true)}
      onBlur={e => setIsSelected(false)}
    />
  );

当父母拥有以MUI为重点的课程时，请显示元素。  请注意，这将适用于两个开始/结束装饰，因此，如果您只想隐藏其中一个，则可能需要进行一些调整。