Установите раскрывающийся список React Select как обязательный в форме

Создание реагирующего приложения. Внутри формы я могу использовать required в поле ввода, поэтому, если обратная публикация сделана на кнопке, она будет помечена, если поле ввода пусто. Это не работает для реакции-выбора.

Что мне не хватает, пожалуйста?

<form onSubmit = {this.handleSubmit}>

  <div className = "field generalField">
    <label className = "label">
      Membership <span className = "required">*</span>
    </label>
    <div className = "control">
      <Select
        options = {membershipOptions}
        name = "membership"
        className = "state-search-choices"
        classNamePrefix = "state-search-choices"
        onChange = {this.handleDropDownChange}
        value = {this.chosenMembership ? this.chosenMembership : null}
        required
        />
    </div>
  </div>

  <div className = "field generalField">
    <label className = "label">
      Company Name <span className = "required">*</span>
    </label>
    <div className = "control">
      <input
        name = "companyName"
        className = "input is-large"
        type = "text"
        required
        onChange = {this.handleChangeEvent}
        />
    </div>
  </div>

Выпадающий список работает должным образом и возвращает правильный выбор. если выбрано. Но требуемый не работает.

Я просмотрел похожие вопросы, такие как Требуется выпадающее меню реакции-выбора но безрезультатно...

ОБНОВЛЯТЬ Так что не уверен, что здесь происходит, во-первых, имейте в виду, что я учусь реагировать, так что это может быть моя вина, вызывающая проблему, но я разделил класс до основ медведя и создал codeandbox https://codesandbox.io/s/delicate-sound-srm2fw?file=/src/App.js

Вот мой фактический код: (я знаю, что кодовое поле использует приложение, и я использую класс.. если это имеет значение?)

Так что это не работает в моем проекте, он по-прежнему помечает поле ввода «Название компании» как обязательное в первую очередь ... но в песочнице он работает, как и ожидалось, сначала помечая раскрывающийся список ... Что я делаю неправильно?

import React, { Component } from 'react';
import Select from 'react-select';

class MembershipFormPaymentComponent extends Component {
    render() {

        @action
        handleSubmit = async ev => {
            try {
                toast.dismiss();
                ev.preventDefault();

                this.isSubmitting = true;
                const props = this.props;
                const domainStores = props.domainStores;

                //api endpoint call to send email

            } catch (error) {
                this.props.uiStores.errorUiStore.GenerateToastErrors(error);
                console.info(error);
            } finally {
                runInAction(() => {
                    this.isSubmitting = false;
                });
            }
        };
        //populate membership DD
        const membershipOptions = [];
        const option0 = { value: 'Buyer', label: 'Buyer Membership ($75/ month)' };
        const option1 = { value: 'Supplier1', label: 'Supplier Three Membership ($145/ month)' };
        const option2 = { value: 'Supplier2', label: 'Supplier Two Membership ($320/ month)' };
        const option3 = { value: 'Supplier3', label: 'Supplier One Membership ($630/ month)' };
        membershipOptions.push(option0);
        membershipOptions.push(option1);
        membershipOptions.push(option2);
        membershipOptions.push(option3);
        
        return (
            <div>
              <form onSubmit = {this.handleSubmit}>
                
                <div className = "field generalField">
                  <label className = "label">
                    Membership <span className = "required">*</span>
                  </label>
                  <div>
                    <Select
                      options = {membershipOptions}
                      name = "membership"
                      required
                    />
                  </div>
                </div>
                
                <div className = "field generalField">
                  <label className = "label">
                    Company Name <span className = "required">*</span>
                  </label>
                  <div className = "control">
                    <input
                      name = "companyName"
                      type = "text"
                      required
                    />
                  </div>
                </div>
                
                <button type = "submit">
                  Submit 
                </button>
                
              </form>
            </div>
        );
    }
}

export default MembershipFormPaymentComponent;
 

Можете ли вы поделиться codesanbox для этого, где мы можем увидеть проблему?

Madan Bhandari 08.05.2023 19:25

Привет, спасибо за ответ. Я предоставил codeSandbox, но, как ни странно, он работает в песочнице, но не в моем проекте... пожалуйста, посмотрите мой обновленный пост, спасибо за любую помощь.

John 08.05.2023 23:05

да, я вижу это, он работает и с классом, я только что скопировал ваш код в эту песочницу, все еще без проблем

Madan Bhandari 08.05.2023 23:19

Вы также можете добавить handleSubmit, может быть, это вызывает проблему

Madan Bhandari 08.05.2023 23:23

Привет, Мадан, спасибо за ответ. Я включил handleSubmit, но я не думаю, что это проблема, поскольку я удалил вызов handleSubmit, чтобы проверить это, и это все еще происходит.

John 09.05.2023 00:39
Улучшение производительности загрузки с помощью Google Tag Manager и атрибута Defer
Улучшение производительности загрузки с помощью Google Tag Manager и атрибута Defer
В настоящее время производительность загрузки веб-сайта имеет решающее значение не только для удобства пользователей, но и для ранжирования в...
Введение в CSS
Введение в CSS
CSS является неотъемлемой частью трех основных составляющих front-end веб-разработки.
Как выровнять Div по центру?
Как выровнять Div по центру?
Чтобы выровнять элемент <div>по горизонтали и вертикали с помощью CSS, можно использовать комбинацию свойств и значений CSS. Вот несколько методов,...
Навигация по приложениям React: Исчерпывающее руководство по React Router
Навигация по приложениям React: Исчерпывающее руководство по React Router
React Router стала незаменимой библиотекой для создания одностраничных приложений с навигацией в React. В этой статье блога мы подробно рассмотрим...
Система управления парковками с использованием HTML, CSS и JavaScript
Система управления парковками с использованием HTML, CSS и JavaScript
Веб-сайт по управлению парковками был создан с использованием HTML, CSS и JavaScript. Это простой сайт, ничего вычурного. Основная цель -...
Toor - Ангулярный шаблон для бронирования путешествий
Toor - Ангулярный шаблон для бронирования путешествий
Toor - Travel Booking Angular Template один из лучших Travel & Tour booking template in the world. 30+ валидированных HTML5 страниц, которые помогут...
1
5
161
2
Перейти к ответу Данный вопрос помечен как решенный

Ответы 2

Внимание: CodeSandbox не содержит упомянутого выше класса MembershipFormPaymentComponent. Итак, в этой CodeSandbox поля проверяются через браузер. Вот почему вы получаете разные результаты из вашего фактического кода.

В классе у вас есть ev.preventDefault(), который останавливает проверку компонента реакции-выбора с помощью проверки HTML. Итак, что бы вы ни получили из коробки, вам необходимо написать для этого код. Вам нужно будет написать код, который проверяет поле выбора до того, как оно достигнет вызова API. Я бы предложил использовать что-то вроде React Hook Form для проверки формы. Это относительно простая в использовании библиотека. Я использую его на всех своих формах.

Вот еще один вопрос о переполнении стека, который похож на вашу проблему.

Форма React Hook

Привет Дуглас. Спасибо, что нашли время написать свой ответ. В конечном счете вы, вероятно, правы, но я только учусь реагировать на минуту и ​​поэтому ищу быстрое решение. Спасибо

John 12.05.2023 03:22
Ответ принят как подходящий

Проверка HTML запускается после события onSubmit. Мы не будем использовать проверку HTML.

Требуемый React Select не будет работать.

Добавьте код для проверки раскрывающегося списка перед вызовом API.

            try {
                toast.dismiss();
                ev.preventDefault();

                this.isSubmitting = true;
                const props = this.props;
                const domainStores = props.domainStores;

                if (!this.chosenMembership)
                {
                    // alert if not chosen
                }
                else
                {
                    //api endpoint call to send email
                }

Коротко и мило, спасибо, Раймонд.

John 12.05.2023 03:23

Другие вопросы по теме