我在我的應用程式中有一個登錄，我想有一個選項來隱藏和取消密碼。
這是我的TextField：
這是我的TextField。
<TextField
className={classes.textf}。
variant="standard"。
placeholder="密碼"。
onChange={(password) => setPassword(password) }
/>
uj5u.com熱心網友回復：
TextField組件有一個type道具，你可以把它設定為 "text "或 "password "來顯示/隱藏值。
const [showPassword, setShowPassword] = useState（false）。
// ...
<TextField。
type={showPassword ? "text" : "password" }
placeholder="password""。
/>
<button onClick={（）/span> => setShowPassword(s =>! s)}>切換可見性</按鈕>
uj5u.com熱心網友回復：
這可能解決你的問題，
import * as React from 'react';
import IconButton from '@mui/material/IconButton';
import FilledInput from '@mui/material/FilledInput';
import InputLabel from '@mui/material/InputLabel';
import InputAdornment from '@mui/material/InputAdornment';
import FormControl from '@mui/material/FormControl';
import Visibility from '@mui/icons-material/Visibility';
import VisibilityOff from '@mui/icons-material/VisibilityOff';
export default function InputAdornments（）{
const [values, setValues] = React.useState（{
password: ''/span>。
showPassword: false。
});
const handleChange = (prop) => (event) => /span>{
setValues({ ...values, [prop]: event.target.value }) 。
};
const handleClickShowPassword = (/span>) => {
setValues（{
...值。
showPassword: !values.showPassword,
});
};
const handleMouseDownPassword = （event）=> {
event.preventDefault（）。
};
return (
<div>
<FormControl sx={{ m: 1, width: '25ch' }}}。變數="填充">
<InputLabel。
htmlFor="fill-adornment-
密碼">
密碼
</InputLabel>密碼
<FilledInput
id="filled-adornment-password"。
type={values.showPassword ? 'text' : 'password' }
value={values.password}
onChange={handleChange('password')}。
endAdornment={}。
<InputAdornment position="end"/span>>
<IconButton。
aria-label="toggle password visibility"。
onClick={handleClickShowPassword}。
onMouseDown={handleMouseDownPassword}。
edge="end">/span>
{values.showPassword ? <VisibilityOff /> : <Visibility />}{values.showPassword ?
</IconButton>。
</InputAdornment>>
}
/>
</FormControl>
</div>
);
}
轉載請註明出處，本文鏈接：https://www.uj5u.com/net/332295.html
標籤：
上一篇：錯誤提示：型別上的屬性不存在