Form.Dropdown语义ui-将不完整字段显示为红色，并带有错误消息

Question

预期结果：

我目前有3个Form.Dropdown字段，它们是必填字段。如果用户在未在这3个字段中进行选择的情况下按了“下一步”，我希望下拉菜单变成红色并显示一条错误消息，说明他们需要采取什么措施来纠正此问题。

实际结果：

我不确定如何进行表单验证，因此，现在这些框永久显示为红色，并且错误消息始终存在。

下拉字段：

<Form.Dropdown
  defaultValue={this.state.initial}
  inline
  //control={Dropdown}
  label='Home'
  selection
  className="dropdown2"
  name='home'
  value={home}
  error
  required 
/>

下一个按钮：

<Button
  color = "green"
  type="submit"
  className="nextbuttonuser"
  onClick={this.handleClick}
  onSubmit={this.handle} 
>
  Next   
  <i class="right arrow icon"></i>
</Button>

Answer 1

我建议您做这样的事情...

内部handleClick函数检查下拉菜单的值是否正确。如果没有，请在该下拉菜单中设置错误的状态

<Form.Dropdown
  defaultValue={this.state.initial}
  inline
  //control={Dropdown}
  label='Home'
  selection
  className="dropdown2"
  name='home'
  value={home}
  error={this.checkDropdownValue}
  required 
/>


checkDropdownValue = () => {
  if(this.state.home === '') {
    return true;
  }
  return false;
}

或类似的东西