Reactjs 提交React表单后，如何清除引导4错误？

我将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;

const输入=（道具）=>{
报税表（
  
{props.title}
      
{props.errors&&props.errors[props.name]&&(
          
{props.errors[props.name].map（（错误，索引）=>(
{错误}
                 ))} 
          
      )}
  
    )
}
导出默认输入；

下面是句柄表单提交函数以及我创建表单的一些容器

  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 */}

异步handleFormSubmit（e）{
e.预防违约（）；
const NC=this.state.newCoop；
删除NC.address.country；
试试{
const response=await fetch（FormContainer.REACT_APP_PROXY+/coops/”{
方法：“张贴”，
正文：JSON.stringify（this.state.newCoop），
标题：{
'Accept'：'application/json'，
'Content-Type'：'application/json'
        },
      });
if（response.ok）{
const result=wait response.json（）；
flash（'记录已成功创建！'，'success'）
返回结果；
      }
抛出wait response.json（）；
}捕获（错误）{
console.log（“错误：”，错误）；
this.setState（{errors}）；
    }  
  }
...
render（）{
if（this.state.coopTypes&&！this.state.coopTypes.length）{
返回null；
    }
返回(
      
        
                  
{/*合作社的名称*/}

问题是，在我提交表单后，如果上次运行时出现错误，它们仍然会显示在屏幕上

---

成功提交表单后，是否有标准方法清除引导错误显示？

因为您使用的是

this.state.errors

要向

组件提供错误信息，只需更新

handleInput（…）

当您的输入值更改时，清除

此.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
}

这是一个如何工作的工作示例：
您需要根据表单是否有效来添加或删除表单验证。为此，请在初始设置为false的
表单上添加
validated
道具

我怎样才能让它工作？
遵循以下提到的步骤：

在包含
表单的组件中创建一个布尔状态变量，其初始值应为false

const [validated, setValidated] = useState(false);


在表单上添加名为
validated
的属性，并将其值设置为步骤1中创建的布尔状态变量

<Form validated={validated}>
   ...
</Form>


如何设置验证错误？我想在更改输入时清除错误消息或设置错误状态，如“”。而不是在表单提交后。您是否也在使用
react bootstrap
？