Как я могу запустить обработку ошибок формы в React / Javascript?

Question

Я использую Material-UI Google Autocomplete, https://material-ui.com/components/autocomplete/#google -maps-place , чтобы потребовать от пользователей заполнить свой адрес.

Мой главный вопрос: как я могу заставить это «Пожалуйста, заполните это поле». всплывающее окно, чтобы показать, даже когда поле не пустое. Например, если пользователь начинает вводить «Составленный адрес 124», но не выбирает его из выпадающего списка автозаполнения Google, я никогда не смогу указать place_id в форме. Вот что я пытаюсь сделать:

handleSubmit(event) {
    event.preventDefault();
    const {form} = this.state;
    if(!form.google_place_id){
      // Trigger "Please fill out this field." error handling and don't submit the form.      
    }
    this.props.onSubmit(form);
}

Answer 1

Всплывающее окно, которое вы видите, встроено в Браузер в соответствии со спецификациями html5.

Но чтобы ответить на ваш вопрос о том, как определить, выбран вариант или нет, вы можете либо реализовать эту функцию самостоятельно, либо используйте API компонента автозаполнения, который вы используете.

https://material-ui.com/api/autocomplete/

Здесь я вижу, что вы можете попробовать freeSolo и getOptionSelected. Если для freeSolo установлено значение false, ввод данных пользователем будет ограничен.

Также посмотрите на autoHighlight и autoSelect, так как это может привести к выбору опции.

Если вы хотите больше контролировать скорее, ваш вклад является одним из вариантов, а затем просто проверьте его самостоятельно.

const optionsObject = {   optionKey1: true, optionKey2: true }

useEffect(()=> {
    if(optionsObject[input]) {
     // input is one of the options
    } else {
  // input is not one of the options
  }
}, [input, optionsObject])

<Autocomplete 
    options={ Object.keys(optionsObject))
/>