React MUI [FilledInput] 没有捕获最后一个字符
我使用 MUI 输入装饰来启用“显示/隐藏密码”，并使用 React State 来保留最终密码（以便通过登录传递密码）。
由于某种原因，最新的字符丢失了，下面是显示这个想法的代码： （链接：https://codesandbox.io/ s/passwordwithshow-c3ktnj?file=/src/App.js:0-1894)
export default function InputAdornments() {
const [values, setValues] = React.useState({
password: "",
showPassword: false
});
const handleChange = (prop) => (event) => {
setValues({ ...values, [prop]: event.target.value });
console.log(values.password);
};
const handleClickShowPassword = () => {
setValues({
...values,
showPassword: !values.showPassword
});
};
const handleMouseDownPassword = (event) => {
event.preventDefault();
};
return (
<div>
<FormControl sx={{ m: 1, width: "30ch" }} variant="filled">
<InputLabel htmlFor="filled-adornment- password">Password</InputLabel>
<FilledInput
id="filled-adornment-password"
type={values.showPassword ? "text" : "password"}
value={values.password}
onChange={handleChange("password")}
endAdornment={
<InputAdornment position="start">
<IconButton
aria-label="toggle password visibility"
onClick={handleClickShowPassword}
onMouseDown={handleMouseDownPassword}
edge="start"
>
{values.showPassword ? <VisibilityOff /> : <Visibility />}
</IconButton>
</InputAdornment>
}
/>
</FormControl>
</div>
);
}
正如您在控制台中看到的，缺少“I”：
I'm using MUI Input Adornments to enable 'show / hide password' and React State to keep the final password (in order to pass it via the login).
For some reason, latest character is missing, below is a code that show the idea:
(link: https://codesandbox.io/s/passwordwithshow-c3ktnj?file=/src/App.js:0-1894)
export default function InputAdornments() {
const [values, setValues] = React.useState({
password: "",
showPassword: false
});
const handleChange = (prop) => (event) => {
setValues({ ...values, [prop]: event.target.value });
console.log(values.password);
};
const handleClickShowPassword = () => {
setValues({
...values,
showPassword: !values.showPassword
});
};
const handleMouseDownPassword = (event) => {
event.preventDefault();
};
return (
<div>
<FormControl sx={{ m: 1, width: "30ch" }} variant="filled">
<InputLabel htmlFor="filled-adornment- password">Password</InputLabel>
<FilledInput
id="filled-adornment-password"
type={values.showPassword ? "text" : "password"}
value={values.password}
onChange={handleChange("password")}
endAdornment={
<InputAdornment position="start">
<IconButton
aria-label="toggle password visibility"
onClick={handleClickShowPassword}
onMouseDown={handleMouseDownPassword}
edge="start"
>
{values.showPassword ? <VisibilityOff /> : <Visibility />}
</IconButton>
</InputAdornment>
}
/>
</FormControl>
</div>
);
}
As you can see in the console, 'I' is missing:
如果你对这篇内容有疑问，欢迎到本站社区发帖提问 参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。
绑定邮箱获取回复消息
由于您还没有绑定你的真实邮箱，如果其他用户或者作者回复了您的评论，将不能在第一时间通知您！
发布评论
评论（1）
您的代码没有任何问题，所以基本上发生的情况是，当 onChange 事件触发时，它会使用目标值更新 state ，并且当您在控制台中记录 state 时您的 onChange 处理程序，它将记录 prevState 因为当前状态尚未在状态中更新。
因此，如果您想使用 onChange 内的值，您应该使用 event.target.value 而不是 state。
there is nothing wrong with your code, So basically what happening is when the onChange event fires it updates the state with the target value and when you're console logging the state inside your onChange handler, it will log the prevState coz the current state is not updated yet in the states.
so if you want to use the value inside the onChange you should use the event.target.value instead of state.