Javascript 绑定到窗体的进度条

我做了这个（为了好玩和教育，我知道这不是最有效的）

JS代码我需要帮助

class App extends React.Component {

validate () {
    event.preventDefault();
    var name = document.getElementById("documentName").value;
    var email = document.getElementById("email").value;
    var re = /\S+@\S+\.\S+/;
    var type = document.getElementById("documentType");
    var typeChosen = type.options[type.selectedIndex].value;
    var category = document.getElementById("category");
    var categoryChosen = category.options[category.selectedIndex].value;

    if (name.length < 2 || name.length > 32) {
        alert("Invalid name length.");
    }
    else if (typeChosen === "" || categoryChosen === "") {
        alert("Please select a value from the dropdown list.");
    }
    else if (email.length > 128) {
        alert("Email exceedes character length.")
    }
    else if (re.test(email) === false) {
        alert("Invalid email adress.");
    }

}
getValue () {
    return "";
}

fillBar () {
    return (<progress max="100" value = {this.getValue()} id="progress">
            </progress>);
}

  render() {
    return (
        <form onSubmit = {this.validate}>
         <div className = "form-progress-bar">
         {this.fillBar()}
        </div>
        <label htmlFor="documentName">Input the document name:</label>
        <br />
          <input id = "documentName"
          type="text" 
          placeholder="Document Name" 
        />
        <br />
        <label htmlFor="documentType">Select document type:</label>
        <br />
        <select className = "dropdown" id = "documentType">
        <option defaultValue = ""> </option>
        <option value = "Plain" label = "Plain" />
        <option value = "PDF" label = "PDF" />
        </select> 
        <br />
        <label htmlFor="category">Select document category:</label>
        <br />
        <select className = "dropdown" id = "category">
        <option defaultValue >  </option>
        <option value = "Audit" label = "Audit" />
        <option value = "Application" label="Application" />
        <option value = "Other" label = "Other" />
        </select>
        <br />
        <label htmlFor="email">Input your email adress:</label>
        <br />
        <input id = "email"
          type="text" 
          placeholder="Email" 
        />
        <br />
        <button id = "button">Submit</button>
      </form>
    );
  }
}

ReactDOM.render(
  <App />,
  document.getElementById('app')
);

类应用程序扩展了React.Component{
验证（）{
event.preventDefault（）；
var name=document.getElementById（“documentName”）.value；
var email=document.getElementById（“email”）.value；
var re=/\S+@\S+\.\S+/；
var type=document.getElementById（“documentType”）；
var typeselected=type.options[type.selectedIndex].value；
var category=document.getElementById（“category”）；
var categoryChosen=category.options[category.selectedIndex].value；
如果（name.length<2 | | name.length>32）{
警告（“名称长度无效”）；
}
else if（typeselected==“”| | categoryChosen==“”）{
警报（“请从下拉列表中选择一个值”）；
}
否则如果（email.length>128）{
警报（“电子邮件超过字符长度。”）
}
否则如果（重新测试（电子邮件）==false）{
警报（“无效电子邮件地址”）；
}
}
getValue（）{
返回“”；
}
填充条（）{
返回(
);
}
render（）{
返回(
{this.fillBar（）}
输入文档名称：




选择文档类型：




选择文档类别：




输入您的电子邮件地址：




提交
);
}
}
ReactDOM.render(
,
document.getElementById（'app'）
);

我一直关注的是如何在每次填写表单的某个字段时向进度值添加25

代码笔也包含html和css代码

---

欢迎任何帮助

您可以添加更改处理程序，并设置字段是否已填充的状态。然后在get value函数中，将状态中的所有真实值相加

例如：

state = {
    (each field)
    emailFilled: false,
}

handleChange = (stateKey) => (event) => {
    const value = event.target.value;
    this.setState({
        [stateKey]: Boolean(value),
    });
}

getValue = () => {
    let value = 0;
    if(this.state.emailFilled) {
        value += 0.25;
    }
}

...
render(){
    ...
    <input id="email"
        type="text"
        placeholder="Email"
        onChange={this.handleChange('emailFilled')}
    />
    ...
}

状态={
（每个字段）
错,，
}
handleChange=（状态键）=>（事件）=>{
常量值=event.target.value；
这是我的国家({
[stateKey]：布尔值（值），
});
}
getValue=（）=>{
设值=0；
if（this.state.emailFilled）{
数值+=0.25；
}
}
...
render（）{
...
...
}

在这一点上帮不了你，但是+1用于使用html元素

progress

而不是像其他人一样使用div；）我这样写的

getValue=（）=>{let value=0；if（this.state.emailFilled | | | this.state.namefiled | | this.state.typeFilled | | this.state.categoryFilled）{value+=25；}value=value.toString（）；返回值；}

但它只添加25次：/n您必须分别检查每个字段。否则，无论填写多少字段，您只需添加25次。如果你做4个如果，那么它会加4次。（或者更好的是，你所在州的地图！[只有当你所在州的所有值都应该是进度条的一部分时]）好的，明白了！谢谢你，朋友！你的回答非常有用