javascript - 提交表格前，所需的文本区域以红色突出显示

使用React / Bootstrap创建一个Web应用程序，并注意到一个错误，即当我打开表单时，在单击“提交”之前，所需的文本区域将以红色突出显示。

Imgur相册显示了该问题（第一张照片是打开表单时的照片，第二张是单击提交后的照片）-https://imgur.com/a/g3wwekt

我尝试了几种不同的方法，唯一可行的方法是删除所需的标签（但这显然是不可接受的）。

这是文本区域的代码：

  <textarea
    className="form-control"
    name="ticketNewDetailedInfo"
    rows="5"
    value={this.state.ticketNewDetailedInfo}
    onChange={this.handleInputChange}
    required
  />

显然，如果用户提交表单时它为空，则仅应以红色突出显示。

最佳答案

从文本区域中删除required属性，并自行处理表单验证。提交表单后，检查以确保所有字段都包含值。如果没有，因为您正在使用引导程序，则可以为该字段指定is-invalid类，它将输入字段变为红色，作为用户的可视队列。快速而简单的想法是：

validateFormValues( values ) {
   var passed = true;
   for( let i = 0; i < values.length; i++ ) {
      if( values[i] === '' ) {
          passed = false;
      }
   }
   return passed;

}

然后在您的文本区域中，您可以写

className={ `form-control ${ !this.state.passed ? 'is-invalid' : ''}` }