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

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

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

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

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

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

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/927880/e655bba3-f1d5-b754-56a3-a4ba8378a564.png)

```react:startAdronment.js
<TextField
   label="With normal TextField"
   id="outlined-start-adornment"
   sx={{ m: 1, width: '25ch' }}
   InputProps={{
     startAdornment: <InputAdornment position="start">kg</InputAdornment>,
   }}
 />
```
<h2>endAdornment</h2>
inputPropにendAdornmentを渡したら、こんな感じ。(MUIのものを引用)

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/927880/ad062213-7103-6e00-2fec-ff11b6c6fdd7.png)

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

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

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/927880/ea9be525-1349-389f-cc28-f4dc8d3a7a67.png)

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/927880/ec1385e6-03a0-9848-517e-6893da14c018.png)

●の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>
  )
}
```

<h2>参考</h2>

https://mui.com/components/text-fields/#input-adornments