如何在反应语义形式中的无效字段周围显示红色边框答案

【问题标题】：How to show red border around the invalid fields in react semantic forms如何在反应语义形式中的无效字段周围显示红色边框
【发布时间】：2017-04-19 06:26:28
【问题描述】：

<Form onSubmit={this.onSubmit} ref="Form">
   <Form.Input label="First Name" name="firstName" type='text' required />
</Form>

目前，如果 firstName 字段为空，则会显示 html5 验证的弹出窗口。但是，我想在所有无效字段周围显示红色边框。

【问题讨论】：

标签： forms reactjs

【解决方案1】：

您只需要删除所需的 html5 属性并检查 onSubmit 函数是否有任何输入。

如果你想显示红色边框，只需在你的文本字段中添加一个类。

<Form onSubmit={this.onSubmit} ref="Form">
   <Form.Input label="First Name" className={this.state.inputClass} name="firstName" type='text' required />
</Form>

并通过应用 if 条件在 onSubmit() 函数上管理这个 className

onSubmit(e){
 e.preventDefault();
 if(! whatever your condition is to check whether name is valid or not)
 this.setState({
  inputClass: "invalid"
 })
}

你的无效会像

.invalid{
border:1px solid #ff0000
}

希望这会有所帮助:)

【讨论】：

感谢您的回复.. 但我已经想到了.. 实际上在我的表单中有很多必填字段.. 在这种情况下，检查所有字段不是一个好的解决方案
参考这个问题stackoverflow.com/questions/28482128/…
由于我使用的是 react 而不是 angularjs，所以输入不会有这些类
那么我认为标准的方法是检查字段是否为空并将类分配给这些字段。这有什么问题？
完全没有问题..但它很乏味，因为有很多必填字段。此外，onChange 我将不得不再次检查它是否有效或仍然无效。我在表单中使用了另一个组件，它可能会变得有点复杂。无论如何，我只会在找到更好的解决方案之前这样做。 :)