我正在使用 React 16.13.0 和 Bootstrap 4。我创建了以下组件,我在我的 React 表单中使用它......
const Input = (props) => {
return (
<div className="form-group">
<FormLabel>{props.title}</FormLabel>
<FormControl
isInvalid={props.errors && Boolean(props.errors[props.name])}
type={props.type}
id={props.name}
name={props.name}
value={props.value}
placeholder={props.placeholder}
onChange={props.handleChange}
/>
{props.errors && props.errors[props.name] && (
<FormControl.Feedback type="invalid">
{props.errors[props.name].map((error, index) => (
<div key={`field-error-${props.name}-${index}`} className="fieldError">{error}</div>
))}
</FormControl.Feedback>
)}
</div>
)
}
export default Input;
下面是处理表单提交功能以及我创建表单的一些容器......
async handleFormSubmit(e) {
e.preventDefault();
const NC = this.state.newCoop;
delete NC.address.country;
try {
const response = await fetch(FormContainer.REACT_APP_PROXY + '/coops/',{
method: "POST",
body: JSON.stringify(this.state.newCoop),
headers: {
'Accept': 'application/json',
'Content-Type': 'application/json'
},
});
if (response.ok) {
const result = await response.json();
window.flash('Record has been created successfully!', 'success')
return result;
}
throw await response.json();
} catch (errors) {
console.log('_error_: ', errors);
this.setState({ errors });
}
}
...
render() {
if (this.state.coopTypes && !this.state.coopTypes.length) {
return null;
}
return (
<div>
<form className="container-fluid" onSubmit={this.handleFormSubmit}>
<FormGroup
controlId="formBasicText">
<Input inputType={'text'}
title= {'Name'}
name= {'name'}
value={this.state.newCoop.name}
placeholder = {'Enter cooperative name'}
handleChange = {this.handleInput}
errors = {this.state.errors}
/> {/* Name of the cooperative */}
问题是,在我提交表单后,如果上次运行出现错误,它们仍会显示在屏幕上。
成功提交表单后,是否有标准方法可以清除 Bootstrap 错误显示?
最佳答案
由于您使用的是 this.state.errors
向您的 <Input>
提供错误信息 Prop 组件,您只需要更新您的 handleInput(...)
清除功能 this.state.errors
当您的输入值发生变化时。这个想法是这样的:
handleInput = (event) => {
const errors = Object.assign({}, this.state.errors);
const target = event.target;
// remove the error value for a specific input only
delete errors[target.name];
this.setState({ errors });
// Do whatever else needs to be done here for your input
}
这是一个工作示例:https://jsfiddle.net/4gqr0cfa/
关于reactjs - 提交 React 表单后,如何清除 Bootstrap 4 错误?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/62179461/