【MUI】TextFieldのstartAdornmentとendAdornmentを簡単にまとめる

textFieldによくいる「Adornment」これはなにか？

startAdornmentとendAdornment。TextFieldコンポーネントについているが直感的にわからず、10分くらい検索して調べることがあったので、簡単に理解できるようにここで簡単にまとめておきます。

Adornment

翻訳すると「装飾品」 MUIにある説明を翻訳すると、「主な方法は、InputAdornmentを使用することです。これを使用して、プレフィックス、サフィックス、またはアクションを入力に追加できます。たとえば、アイコンボタンを使用して、パスワードを非表示または表示できます。」

TextFiledに単位などの装飾をつけたり、アイコンボタンを併用してパスワード表示非表示のファンクションを仕込めるようです。

実例を見ていきましょう！

startAdornment

inputPropにstartAdornmentを渡したら、こんな感じ。(MUIのものを引用)

startAdronment.js

<TextField
   label="With normal TextField"
   id="outlined-start-adornment"
   sx={{ m: 1, width: '25ch' }}
   InputProps={{
     startAdornment: <InputAdornment position="start">kg</InputAdornment>,
   }}
 />

endAdornment

inputPropにendAdornmentを渡したら、こんな感じ。(MUIのものを引用)

endAdronment.js

<TextField
  label="With normal TextField"
  id="outlined-start-adornment"
  sx={{ m: 1, width: '25ch' }}
  InputProps={{
    ebdAdornment: <InputAdornment position="start">kg</InputAdornment>,
  }}
/>

passwordTextField

passwordのTextFieldによくついてる●にON/OFF機能を付けたやつはこんな感じ(MUIのものを引用)

●のON/OFFをstateで切り替えをしており、それぞれICONと●表示を制御しています。
また、handleClickShowPasswordでAdornment押下時にON/OFFを逆にセットできるようになっています。

passwordTextField.js

export function PasswordTextField({ label, value, setValue, helperText }) {
  const classes = useStyles();
  const [showPassword, setShowPassword] = useState(false);

  function handleClickShowPassword() {
    setShowPassword(!(showPassword))
  }

  function handleMouseDownPassword (event) {
    event.preventDefault();
  };

  return (
    <div>
      {
      <form className={classes.root} noValidate autoComplete="off">
        <TextField
            id="outlined-basic"
            label={label}
            variant="outlined"
            fullWidth
            value={value}
            helperText={helperText}
            type={showPassword ? 'text' : 'password'}
            InputProps={{
              endAdornment:
                <InputAdornment position="end">
                  <IconButton
                    aria-label="toggle password visibility"
                    onClick={handleClickShowPassword}
                    onMouseDown={handleMouseDownPassword}
                    edge="end"
                  >
                    {showPassword ? <VisibilityOff /> : <Visibility />}
                  </IconButton>
                </InputAdornment>
            }}
            onChange={(event) => handleChange(event)}
            onKeyDown={(event) => {
              if (event.key === 'Enter') {
                event.preventDefault();
                onKeyDown(event)
              }
            }
            }
          />
        </form>
      }
    </div>
  )
}

参考