javascript - 绑定到表单的进度条
问题描述
我做了这个(为了好玩和教育,我知道这不是最有效的)
https://codepen.io/paschos/pen/xxGXMQb
我需要帮助的 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')
);
我坚持的是每次填写表单字段时如何将进度值添加 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')}
/>
...
}
推荐阅读
- jquery - 如何在 Bootsrap 模式上仅隐藏滚动条拇指?
- flutter - 在执行 Widget 状态构建时导航
- python - 尝试使用 ip 范围制作 ip 列表
- python - 如何将列的值显示为单独的列
- python-2.7 - 有没有办法使用pygame一次播放多个声音?
- python - 访问 sqlalchemy orm 声明性基类的元素
- python-3.x - 返回函数外
- tensorflow - Tensorflow Keras,如何将损失权重添加为不可训练的变量?
- java - 如何使用方法更改变量值?有人可以给我一些提示来提高我的编码知识吗?
- python - 将多个选择添加到要用于捕捉脚本的主选择列表