Отключить отправку, пока все поля не будут действительны в реагирующем ремне

Question

У меня есть форма в Reactionstrap, которая имеет несколько полей ввода, который использует FormFeedback, как это:

<Input invalid={typeof data.name === "undefined" || data.name.length<1} bssize="sm" type="text" name="name" id="name" placeholder="Name" value={data.name} onChange={this.props.handleInputChange} />
<FormFeedback >A name is required</FormFeedback>

<Button color="primary" onClick={this.save} disabled={!this.state.okToSubmit}>Submit</Button>

Можно ли отключить кнопку отправки формы, пока все поля не подтвердятся?

Я не могу найти какой-либо способ получить доступ к "недопустимой" опоре поля. Самое близкое, что я дошел до этого, - это просмотр classList цели в handleInputChange-функции. Но это кажется очень хакерским и не лучшим способом.

Совершенно новый для React, поэтому вся помощь очень ценится.

Answer 1

Есть несколько способов сделать это: Поскольку вы используете onChange обработчик событий, вы можете установить другое состояние var.

Так, например, у вас есть пять элементов формы, которые вы хотите required. Каждый раз, когда элемент проверяется, увеличивайте это состояние var на единицу. Затем добавьте условие для отключения кнопкиdisabled={this.state.okToSubmit != 5} (это также можно сделать с помощью хуков, если вы используете функциональный компонент.

Другой вариант - оставить кнопку в рабочем состоянии и выполнить всю проверку в onSubmit обработчик, но я думаю, что самый современный UX должен проверять на основе каждого элемента.