Get React在表单输入字段下显示单个错误消息
Get React在表单输入字段下显示单个错误消息
提问于 2017-05-12 13:36:46
我提交了一个返回错误数组的表单，但我在弄清楚如何让每个错误出现在正确的输入字段下面时遇到了麻烦。现在，所有错误都打印在每个输入字段下。我使用的是react-bootstrap。任何帮助都将不胜感激。
getValidationState() {
var errors = this.state.errors;
if (!$.isEmptyObject(errors))
{
errors.forEach(function(error) {
console.log("error:", error.name);
});
}
}
render() {
const inputProps = {
value: this.state.address,
onChange: this.onChange,
}
return (
<form onSubmit={this.handleSubmit.bind(this)}>
<FormGroup
validationState={this.getValidationState()} >
<FormControl
type="text"
name="firstName"
value={this.state.firstName}
placeholder="First name"
onChange={this.handleChange}
/>
<FormControl.Feedback />
{this.state.errors && this.state.errors.length &&
<HelpBlock>
{this.state.errors.map((error, i) => <p key={i}>HEllo{error.value}</p>)}
</HelpBlock>
}
</FormGroup>
<FormGroup >
<FormControl
type="text"
name="lastName"
value={this.state.lastName}
placeholder="Last name"
onChange={this.handleChange}
/>
{this.state.errors && this.state.errors.length &&
<HelpBlock>
{this.state.errors.map((error, i) => <p key={i}>HEllo{error.value}</p>)}
</HelpBlock>
}
</FormGroup>
<FormGroup >
<Button type="submit">
Save
</Button>
</FormGroup>
</form>
)
}Stack Overflow用户
回答已采纳
发布于 2017-05-12 15:17:32
每个输入的错误消息应该单独存储和显示(也可以使用state )：
constructor(props){
super(props)
this.state = {
firstNameErr: '',
lastNameErr: '',
}
this.getValidationState = this.getValidationState.bind(this);
}
getValidationState() {
var errors = this.state.errors;
if (!$.isEmptyObject(errors))
{
var firstErr = '';
var lastErr = '';
errors.forEach((error) => {
console.log("error:", error.name);
// Check each error to see which input it belongs to
// NOTE: please also consider using error.name instead, if error.message is invalid, thanks!
if(error.message.indexOf('firstName') != -1){
firstErr = error.message;
}
if(error.message.indexOf('lastName') != -1){
lastErr = error.message
}
});
this.setState({
firstNameErr: firstErr,
lastNameErr: lastErr,
});
}
}
render() {
const inputProps = {
value: this.state.address,
onChange: this.onChange,
}
return (
<form onSubmit={this.handleSubmit.bind(this)}>
<FormGroup
validationState={this.getValidationState()} >
<FormControl
type="text"
name="firstName"
value={this.state.firstName}
placeholder="First name"
onChange={this.handleChange}
/>
<FormControl.Feedback />
<HelpBlock>
<p className="text-danger">{this.state.firstNameErr}</p>
</HelpBlock>
</FormGroup>
<FormGroup >
<FormControl
type="text"
name="lastName"
value={this.state.lastName}
placeholder="Last name"
onChange={this.handleChange}
/>
<HelpBlock>
<p className="text-danger">{this.state.lastNameErr}</p>
</HelpBlock>
</FormGroup>
<FormGroup >
<Button type="submit">
Save
</Button>
</FormGroup>
</form>
)
}这就是我的想法，如果它还不能工作，请在你的控制台中给我展示一些错误，谢谢
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/43930022
复制相关文章
相似问题
腾讯云开发者
