我正在ReactJS
中处理form
,我有多个输入
(在 fiddle 中它只是一个演示,它是真实代码中大约有 10-15 个输入) 我想验证所有输入,如果所有输入都有效,则提交/POST 到 api,到目前为止我尝试的是这个 JSFiddle
handleChange = (e) => {
if (e.target.value.length >= 5) {
this.setState({
submit: true
})
} else {
this.setState({
submit: false
})
}
}
因此,为此,我定义了一个名为 submit
的状态,如果 submit
为 true
,表单将提交并调用 API
。问题是,如果用户填写并有效输入之一,submit
设置为 true
,但我希望当用户验证所有输入时,submit
应该设置为true
。
最佳答案
您应该有组件状态来管理输入的验证。下面是我使用你的代码并进行了编辑:
class App extends React.Component {
constructor(props) {
super(props);
this.state = {
submit: false,
isValid: {
"1": false,
"2": false,
"3": false,
"4": false,
"5": false
}
};
}
handleSubmit = e => {
e.preventDefault();
if (this.state.submit) {
alert("POSTED TO API");
} else {
alert("fill the form!");
}
};
checkValid = () => {
if (
Object.values(this.state.isValid).filter(value => !value).length === 0
) {
this.setState({ ...this.state, submit: true });
}
};
handleChange = (e, item) => {
if (e.target.value.length >= 5) {
this.setState(
{
...this.state,
isValid: { ...this.state.isValid, [`${item}`]: true }
},
this.checkValid
);
}
};
render() {
return (
<form onSubmit={this.handleSubmit}>
submit is: {this.state.submit ? "true" : "false"}
<br />
{[1, 2, 3, 4, 5].map(item => {
return (
<input
name={"field" + item}
type="text"
onChange={e => {
this.handleChange(e, item);
}}
/>
);
})}
<input type="submit" value="ok" />
</form>
);
}
}
export default App;
关于javascript - ReactJS如何验证所有输入然后提交,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/58511462/