Javascript React redux密码强度条不工作

嗨，我想为我的密码添加一个进度强度条，但不确定如何在react中链接“eventlistner”。到目前为止，该代码用于检查密码正则表达式，但不确定如何添加密码强度条。我不知道如何在react中使用addEventListener

请看一下我的代码，告诉我我做错了什么？谢谢

import React from 'react'
import {connect} from 'react-redux'
import {registerUserRequest} from '../../actions/register'
import {loginError} from '../../actions/login'

class Register extends React.Component {
  constructor(props) {
    super(props)
    this.state = {
      user_name: '',
      contact_number: '',
      email_address: '',
      password: '',
      confirm_password: ''
    }
    this.updateDetails = this.updateDetails.bind(this)
    this.submit = this.submit.bind(this)
    this.validateEmail = this.validateEmail.bind(this)
    this.validatePassword = this.validatePassword.bind(this)
  }

  componentDidMount() {
    this.props.dispatch(loginError(''))
  }

  updateDetails(e) {
    this.setState({[e.target.name]: e.target.value})
  }

  submit(e) {
    e.preventDefault()
    e.target.reset()
    let {user_name, password, confirm_password, email_address, 
    contact_number} = this.state
    function confirmation (){
      if (confirm_password != password)
        return false
      else
        return true
    }

    const isEmail = this.validateEmail(email_address)
    const passwordsNotSame = (confirm_password != password)
    const isPass = this.validatePassword(password)

    if (!isEmail || passwordsNotSame) return 
    this.props.dispatch(loginError("Incorrect email/Passwords don't 
    match"))
    else if (!isPass) return this.props.dispatch(loginError('Password 
    strength must be 8 or above and must include atleast one number '))
    else return this.props.dispatch(registerUserRequest(this.state))
  }

  validateEmail(email) {
    var re = /^(([^<>()\[\]\\.,;:\s@"]+(\.[^<>()\[\]\\.,;:\s@"]+)*)|
    (".+"))@((\[[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\])|(([a-zA-
    Z\-0-9]+\.)+[a-zA-Z]{2,}))$/;
    var isValid = re.test(String(email).toLowerCase());
    // console.log('No joke', isValid)
    return isValid
  }

  validatePassword(pass) {
    var re = /^(?=.*[A-Za-z])(?=.*\d)[A-Za-z\d]{8,}$/;
    var isPasswordValid = re.test(String(pass));
    return isPasswordValid
  }

  const pass = document.getElementById("password")
  pass.addEventListener('keyup', function() {
    checkPassword(pass.value)
  })

  checkPassword(password) {
    var strengthBar = document.getElementById("strength")
    var strength = 0;
    if (password.match(/[a-zA-Z0-9][a-zA-Z0-9]+/)) {
      strength += 1
    }
    if (password.match(/[~<>]+/)) {
      strength +=1
    }
    if (password.match(/[!@£$%^&()]+/)) {
      strength +=1
    } if (password.length > 5) {
    strength +=1
    }
    switch(strength) {
    case 0:
            strengthBar.value = 20;
            break
    case 1:
            strengthBar.value = 40;
            break
    case 2:
            strengthBar.value = 60;
            break
    case 3:
            strengthBar.value = 80;
            break
    case 4:
            strengthBar.value = 100;
            break
    }
  }

  render() {
    const {auth} = this.props
    return (
      <form onSubmit={this.submit}>
        <h1>Register</h1>
        <hr />
        <b>{auth.errorMessage && <span>{auth.errorMessage}</span>}</b>

        <div className="field is-horizontal">
          <div className="field-label is-normal">
            <label>Username</label >
          </div>
           <input   className="input is-medium"required placeholder="User 
    Name" type="text" name="user_name" onChange={this.updateDetails}/>
        </div>

        <div className="field is-horizontal">
          <div className="field-label is-normal">
            <label>Contact Number</label>
          </div>
          <input className="input is-medium"required placeholder="Contact 
    Number" type="text" name="contact_number" onChange=
    {this.updateDetails}/>
        </div>

          <div className="field is-horizontal">
            <div className="field-label is-normal">
              <label>Email Address</label>
            </div>
            <div className="field-body">
                <div className="field">
                  <input className="input is-medium"required 
    placeholder="Email Address" type="text" name="email_address" onChange=
    {this.updateDetails}/>
                </div>
            </div>
          </div>

        <div className="field is-horizontal">
          <div className="field is-horizontal">
            <label>Password</label>
            <progress max="100" value="0" id="strength"></progress>
          </div>
            <input className="input is-medium"required 
    placeholder="Password" type="password" name="password" onChange=
    {this.updateDetails}/>
        </div>
        <div className="field is-horizontal">
          <div className="field is-horizontal">
            <label>Confirm Password</label>
          </div>
            <input className="input is-medium"required 
    placeholder="Confirm Password" type="password" name="confirm_password" 
    onChange={this.updateDetails}/>
         </div>
        <input className="button is-primary" value="Register" 
    type="submit" />

      </form>
        )
    }
  }

  const mapStateToProps = ({auth}) => ({auth}) 

  export default connect(mapStateToProps)(Register)

从“React”导入React
从“react redux”导入{connect}
从“../../actions/register”导入{registerUserRequest}
从“../../actions/login”导入{loginError}
类寄存器扩展了React.Component{
建造师（道具）{
超级（道具）
此.state={
用户名：“”，
联系电话：''，
电子邮件地址：“”，
密码：“”，
确认密码：“”
}
this.updateDetails=this.updateDetails.bind（this）
this.submit=this.submit.bind（this）
this.validateEmail=this.validateEmail.bind（this）
this.validatePassword=this.validatePassword.bind（this）
}
componentDidMount（）{
此.props.dispatch（登录错误（“”））
}
更新的详细信息（e）{
this.setState（{[e.target.name]：e.target.value}）
}
提交（e）{
e、 预防默认值（）
e、 target.reset（）
让{用户名、密码、确认密码、电子邮件地址、，
联系人号码}=this.state
功能确认（）{
如果（确认密码！=密码）
返回错误
其他的
返回真值
}
const isEmail=this.validateEmail（电子邮件地址）
const passwordsNotSame=（确认密码！=密码）
const isPass=this.validatePassword（密码）
如果（！isEmail | | passwordsNotSame）返回
此.props.dispatch（登录错误）（“不允许使用错误的电子邮件/密码
匹配“））
否则，如果（！isPass）返回此.props.dispatch（login错误（'Password
强度必须为8或以上，并且必须至少包含一个数字（'））
否则返回此.props.dispatch（registerUserRequest（this.state））
}
验证电子邮件（电子邮件）{
变量re=/^（（[^（）\[\]\\，；：\s@“]+（\.[^（）\[\]\\，；：\s@“]+）*）|
（“+”）@（\[[0-9]{1,3}.[0-9]{1,3}.[0-9]{1,3}.[0-9]{1,3}.[0-9]{1,3}.]））|（[a-zA]-
Z \-0-9]+\）+[a-zA-Z]{2，}））$/；
var isValid=re.test（字符串（email.toLowerCase（））；
//console.log（'不开玩笑'，有效）
返回有效
}
验证密码（pass）{
变量re=/^（？=.[A-Za-z]）（？=..*\d）[A-Za-z\d]{8，}$/；
var isPasswordValid=re.test（字符串（通过））；
返回isPasswordValid
}
const pass=document.getElementById（“密码”）
pass.addEventListener（'keyup'，function（）{
检查密码（pass.value）
})
检查密码（密码）{
var strengthBar=document.getElementById（“强度”）
var强度=0；
如果（密码匹配（/[a-zA-Z0-9][a-zA-Z0-9]+/）{
强度+=1
}
if（password.match（/[~]+/））{
强度+=1
}
if（password.match（/[！@$%^&（）]+/）{
强度+=1
}如果（password.length>5）{
强度+=1
}
开关（强度）{
案例0：
强度bar.value=20；
打破
案例1：
强度bar.value=40；
打破
案例2：
强度bar.value=60；
打破
案例3：
强度bar.value=80；
打破
案例4：
强度bar.value=100；
打破
}
}
render（）{
const{auth}=this.props
返回(
登记

{auth.errorMessage&&{auth.errorMessage}
用户名
联系电话
电子邮件地址
暗语
确认密码
)
}
}
常量mapStateToProps=（{auth}）=>（{auth}）
导出默认连接（MapStateTops）（寄存器）

这是您可以在组件中进行的一些更改

<progress max="100" value={(this.state.password_strength * 20)} id="strength"></progress>

进行中组件

<progress max="100" value={(this.state.password_strength * 20)} id="strength"></progress>

最后，你的checkPassword方法

checkPassword(e) {
  const password = e.target.value;
  const password_strength = 0;
  var strength = this.state.password_strength;
  if (password.match(/[a-zA-Z0-9][a-zA-Z0-9]+/)) {
    strength += 1
  }
  if (password.match(/[~<>]+/)) {
    strength +=1
  }
  if (password.match(/[!@£$%^&()]+/)) {
    strength +=1
  } if (password.length > 5) {
  strength +=1
  }
  this.setState({password_strength: strength});
}

checkPassword（e）{
const password=e.target.value；
常量密码\u强度=0；
var-strength=this.state.password\u-strength；
如果（密码匹配（/[a-zA-Z0-9][a-zA-Z0-9]+/）{
强度+=1
}
if（password.match（/[~]+/））{
强度+=1
}
if（password.match（/[！@$%^&（）]+/）{
强度+=1
}如果（password.length>5）{
强度+=1
}
this.setState（{password\u-strength:strength}）；
}

---

如果仍然无法工作，请在codepen上共享您的工作代码。

您的进度元素应链接到密码检查函数：

和

getPasswordStrength（）

函数应查看处于状态的密码，计算其强度，然后返回它。不要在React中执行直接DOM操作，这会导致问题。

checkPassword(e) {
  const password = e.target.value;
  const password_strength = 0;
  var strength = this.state.password_strength;
  if (password.match(/[a-zA-Z0-9][a-zA-Z0-9]+/)) {
    strength += 1
  }
  if (password.match(/[~<>]+/)) {
    strength +=1
  }
  if (password.match(/[!@£$%^&()]+/)) {
    strength +=1
  } if (password.length > 5) {
  strength +=1
  }
  this.setState({password_strength: strength});
}