Проверка ввода - отправка формы реакции без каких-либо значений
У меня проблема с проверкой ввода, которая позволяет отправить форму без добавления каких-либо selectorValues. Моя проверка, похоже, проверяет только ввод внутри textarea, но не учитывает нажатие кнопки «Добавить».
Вот песочница, воспроизводящий проблему.
Я использую Semantic-ui-react, поэтому мой <Form.Field /> выглядит так:
<Form.Field required>
<label>Selector Values:</label>
<TextArea
type = "text"
placeholder = "Enter selector values 1-by-1 or as a comma seperated list."
value = {this.state.selectorValue}
onChange = {this.handleSelectorValueChange}
required = {!this.state.selectorValues.length}
/>
<Button positive fluid onClick = {this.addSelectorValue}>
Add
</Button>
<ul>
{this.state.selectorValues.map((value, index) => {
return (
<Card>
<Card.Content>
{value}
<Button
size = "mini"
compact
floated = "right"
basic
color = "red"
onClick = {this.removeSelectorValue.bind(this, index)}
>
X
</Button>
</Card.Content>
</Card>
);
})}
</ul>
</Form.Field>
Итак, в приведенном выше <TextArea> есть необходимая опора: !this.state.selectorValues.length. Это только проверка ввода внутри textarea, он должен проверить, было ли добавлено значение, нажав кнопку Add, прежде чем разрешить отправку формы.
Да, я также хочу предотвратить это
Мой ответ предотвратит добавление пустых значений, но я не уверен, что понимаю, в чем еще проблема, можете ли вы объяснить, что еще нужно исправить?
Если вы начнете вводить значение в текстовое поле и нажмете «Отправить», это позволит отправить форму без фактического добавления значения с помощью кнопки.
![Безумие обратных вызовов в javascript [JS]](https://i.imgur.com/WsjO6zJb.png)
Ответы 2
В вашем addSelectorValue добавьте проверку, чтобы убедиться, что this.state.selectorValue он не пустой, если он просто возвращается, это предотвратит добавление пустых значений в selectorValues
addSelectorValue = e => {
e.stopPropagation();
e.preventDefault();
if (!this.state.selectorValue) return;
//continue if this.state.selectorValue has a value
};
Перед отправкой добавьте проверку, чтобы убедиться, что this.selectorValues пусто, если это так, сосредоточьтесь на текстовой области.
Чтобы сфокусироваться, нам нужно сначала создать ссылку на нашу текстовую область.
Создайте ссылка, который будет прикреплен к элементу dom
textareaRef = React.createRef();
// will use our ref to focus the element
focusTextarea = () => {
this.textareaRef.current.focus();
}
handleSubmit = () => {
const { selectorValues } = this.state;
if (!selectorValues.length) {
// call our focusTextarea function when selectorValues is empty
this.focusTextarea();
return;
}
this.setState({ submittedSelectorValues: selectorValues });
};
// attach our ref to Textarea
<Textarea ref = {this.textareaRef} />
Это работает. Есть ли способ сделать его предупреждением, ориентированным на рассматриваемый ввод, а не на предупреждение браузера? Для этого мне, вероятно, понадобится проверка схемы, например yup.
Я отредактировал свой ответ, чтобы сосредоточить внимание на Textarea при проверке.
После некоторого поиска ... required prop предназначен только для декоративных целей - добавление звездочки к метке поля.
Ему нечего формировать валидацию. Для этого вам нужно отдельное решение - попробуйте формик или установите какое-то условие в обработчике отправки.
Formik пьесыприятно со схемой проверки yup — подходит для более сложных динамических требований.
<Form> из семантического пользовательского интерфейса реагирует на данные так же, как ванильный реагирует <form />. Таким образом, использование required реквизита внутри <TextArea> имеет цель. <Form.Field /> необходимый реквизит действительно является декоративным в том смысле, который вы описали.
Вы хотите предотвратить добавление пустых значений в
selectorValues? или есть что-то еще?