时间戳

首页 > 解决方案 > 为什么我输入内容时文本字段和复选框会下降？

javascript - 为什么我输入内容时文本字段和复选框会下降？

问题描述

我正在使用 React 和 Material UI 创建一个示例登录页面。对于密码字段，我编写了一个函数，只有当用户开始输入时，才会出现显示/隐藏密码图标。但是自从我更改密码文本字段后，它下面的复选框和忘记密码的部分会在我开始输入密码时缩小。我不确定出了什么问题以及如何解决。

这张图片是在我输入任何内容之前

这张图是我输入密码后的

<Grid item xs={8}>
    <div className={this.state.isArabic ? "input-content-area-password-arabic" : "input-content-area-password"}>
        <TextField className="insert-username-input" id="secret" label={getLabel({ module: "Login", label: "Password" })} variant="outlined" size="small" type={this.state.passwordInputType} onChange={(e) => { this.setState({ password: e.target.value, isInvalid: false }) }} fullWidth />
        <div className={this.state.isArabic ? "password-show-hide-icon-arabic" : "password-show-hide icon"} >
            {this.state.hidePassword ? 
                <div>
                    {
                    this.state.password ? 
                    <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" className="bi bi-eye" viewBox="0 0 16 16" onClick={this.showPasswordData}>
                    <path d="M16 8s-3-5.5-8-5.5S0 8 0 8s3 5.5 8 5.5S16 8 16 8zM1.173 8a13.133 13.133 0 0 1 1.66-2.043C4.12 4.668 5.88 3.5 8 3.5c2.12 0 3.879 1.168 5.168 2.457A13.133 13.133 0 0 1 14.828 8c-.058.087-.122.183-.195.288-.335.48-.83 1.12-1.465 1.755C11.879 11.332 10.119 12.5 8 12.5c-2.12 0-3.879-1.168-5.168-2.457A13.134 13.134 0 0 1 1.172 8z" />
                    <path d="M8 5.5a2.5 2.5 0 1 0 0 5 2.5 2.5 0 0 0 0-5zM4.5 8a3.5 3.5 0 1 1 7 0 3.5 3.5 0 0 1-7 0z" />
                    </svg>
                    : <div></div>
                    }
                </div>
                    :
                <div>
                    <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" className="bi bi-eye-slash" viewBox="0 0 16 16" onClick={this.hidePasswordData}>
                    <path d="M13.359 11.238C15.06 9.72 16 8 16 8s-3-5.5-8-5.5a7.028 7.028 0 0 0-2.79.588l.77.771A5.944 5.944 0 0 1 8 3.5c2.12 0 3.879 1.168 5.168 2.457A13.134 13.134 0 0 1 14.828 8c-.058.087-.122.183-.195.288-.335.48-.83 1.12-1.465 1.755-.165.165-.337.328-.517.486l.708.709z" />
                    <path d="M11.297 9.176a3.5 3.5 0 0 0-4.474-4.474l.823.823a2.5 2.5 0 0 1 2.829 2.829l.822.822zm-2.943 1.299l.822.822a3.5 3.5 0 0 1-4.474-4.474l.823.823a2.5 2.5 0 0 0 2.829 2.829z" />
                    <path d="M3.35 5.47c-.18.16-.353.322-.518.487A13.134 13.134 0 0 0 1.172 8l.195.288c.335.48.83 1.12 1.465 1.755C4.121 11.332 5.881 12.5 8 12.5c.716 0 1.39-.133 2.02-.36l.77.772A7.029 7.029 0 0 1 8 13.5C3 13.5 0 8 0 8s.939-1.721 2.641-3.238l.708.709zm10.296 8.884l-12-12 .708-.708 12 12-.708.708z" />
                    </svg>
                </div>
            }
        </div>
    </div>
</Grid>

标签： javascriptreactjsmaterial-ui

解决方案

我告诉你我是怎么做到的

import TextField from '@material-ui/core/TextField';
import InputAdornment from '@material-ui/core/InputAdornment';
import IconButton from '@material-ui/core/IconButton';
import VisibilityOn from '@material-ui/icons/Visibility';
import VisibilityOff from '@material-ui/icons/VisibilityOff';

<TextField 
 margin="normal"
 required
 fullWidth
 label="Login"
 placeholder="password"
 autoFocus
 InputProps={{
  endAdornment:(
   <InputAdornment position="end">
    <InputButton
     size="small"
     edge="end"
     onClick={() => setShowPassword(!showPassword)} 
    >
      {showPassword ? <VisibilityOff /> : <VisibilityOn />}
    </InputButton>
   </InputAdornment>
  )
 }}
 onChange={ e => setPassword(e.target.value)}
/>

推荐阅读