Создание реагирующего приложения. Внутри формы я могу использовать 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;
Привет, спасибо за ответ. Я предоставил codeSandbox, но, как ни странно, он работает в песочнице, но не в моем проекте... пожалуйста, посмотрите мой обновленный пост, спасибо за любую помощь.
да, я вижу это, он работает и с классом, я только что скопировал ваш код в эту песочницу, все еще без проблем
Вы также можете добавить handleSubmit
, может быть, это вызывает проблему
Привет, Мадан, спасибо за ответ. Я включил handleSubmit, но я не думаю, что это проблема, поскольку я удалил вызов handleSubmit, чтобы проверить это, и это все еще происходит.
Внимание: CodeSandbox не содержит упомянутого выше класса MembershipFormPaymentComponent
. Итак, в этой CodeSandbox поля проверяются через браузер. Вот почему вы получаете разные результаты из вашего фактического кода.
В классе у вас есть ev.preventDefault()
, который останавливает проверку компонента реакции-выбора с помощью проверки HTML. Итак, что бы вы ни получили из коробки, вам необходимо написать для этого код. Вам нужно будет написать код, который проверяет поле выбора до того, как оно достигнет вызова API. Я бы предложил использовать что-то вроде React Hook Form для проверки формы. Это относительно простая в использовании библиотека. Я использую его на всех своих формах.
Вот еще один вопрос о переполнении стека, который похож на вашу проблему.
Привет Дуглас. Спасибо, что нашли время написать свой ответ. В конечном счете вы, вероятно, правы, но я только учусь реагировать на минуту и поэтому ищу быстрое решение. Спасибо
Проверка 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
}
Коротко и мило, спасибо, Раймонд.
Можете ли вы поделиться codesanbox для этого, где мы можем увидеть проблему?