使Material-UI InputAdornment图标仅在选中时可见？

Question

是否可以仅在用户选择文本字段时使此沙箱（https://codesandbox.io/s/material-demo-w385h）中的Material-UI图标装饰可见？

代码：

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

我希望找到一个使用Material-UI道具的干净解决方案。

Answer 1

我在发布此消息后立即意识到了解决方案：

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

设置IconAdornment时包含InputProps的变量isSelected === true。

OnFocus：setIsSelected(true)和OnBlur：setIsSelected(false)。

  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)}
    />
  );