Question

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

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

Answer 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 condition

在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
}

希望这会有所帮助：）

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

1 个答案: