React MUI [FilledInput] 没有捕获最后一个字符

Question

我正在使用 MUI Input Adornments 启用 'show / hide password' 和 React State 以保留最终密码（以便通过登录传递）。

由于某种原因，最新的字符丢失了，下面是一个展示这个想法的代码： (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>
  );
}

如您在控制台中所见，缺少 'I'：

Answer 1

您的代码没有任何问题，所以基本上发生的事情是当 onChange 事件触发时它会使用目标值更新 state 并且当您在控制台记录 state 在您的 onChange 处理程序中，它将记录 prevState 因为当前状态尚未更新州。

所以如果你想使用 onChange 中的值，你应该使用 event.target.value 而不是状态。

console.log(password) => console.log(event.target.value)

React MUI [FilledInput] 没有捕获最后一个字符

React MUI [FilledInput] doesn't capture last the character

state

reactjs

material-ui