Question

我有一个引导主题的进度条，我想用它来显示进度，该进度条用于注册提交表单。我制作了一个状态变量，称为progress，使用不同的处理程序对其进行递增，以配置输入。

例如我的密码处理程序，它使用正则表达式字符串检查密码。

passwordValidator = (password) =>{
var passwordRegex = /^[a-zA-Z0-9]+([a-zA-Z0-9](_|-| )[a-zA-Z0-9])*[a-zA-Z0-9]+$/; // find bedre regex pattern
if (passwordRegex.test(password)) {
  this.setState({
    isPasswordCorrect: true,
    progress: this.state.progress +25
  });
} else {
  this.setState({
    isPasswordCorrect: false
  });
}
console.log("password is " +this.state.isPasswordCorrect);
}

在这里，如果密码通过验证，我会增加进度计数

<div class="progress">
 <div class="progress-bar" {/* other css props */} style= 
  {{width: ''}}></div>
 </div>

在这里，我想将宽度的样式属性设置为状态进度，但是我需要包括百分号，因此我想知道是否可以将%连接起来并使其成为字符串？ / p>

 <div class="progress">
  <div class="progress-bar" {/* other css props */} style= 
 {{width: this.state.progress +'%'}}></div>
 </div>

还是类似的东西？

Answer 1

我认为答案是使用模板字符串文字，因此我可以使用美元符号表示法访问状态

style={{width: `${this.state.progress}%`}}

将state显示为带状态的css prop。 reactJS中的内联样式

1 个答案: