Form.Dropdown semanti c - отображать неполные поля красным цветом с сообщением об ошибке - PullRequest
Новая
       18

Form.Dropdown semanti c - отображать неполные поля красным цветом с сообщением об ошибке

0 голосов
/ 08 января 2020

Ожидаемый результат:

В настоящее время у меня есть 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>

1 Ответ

0 голосов
/ 10 января 2020

Я предлагаю вам сделать что-то вроде этого ...

Внутри функции 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;
}

или что-то похожее на это

...