禁用提交，直到所有字段在 reactstrap 中都有效答案

【问题标题】：Disable submit until all fields are valid in reactstrap禁用提交，直到所有字段在 reactstrap 中都有效
【发布时间】：2019-03-17 21:31:19
【问题描述】：

我在 reactstrap 中有一个表单，它有几个使用 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>

是否可以禁用表单的提交按钮，直到所有字段都验证正常？

我找不到任何方法来访问字段的“无效”属性。到目前为止，我最接近的是查看 handleInputChange 函数中的目标类列表。但这感觉很老套，并不是最好的方法。

对 React 很陌生，因此非常感谢所有帮助。

【问题讨论】：

我认为没有比在不使用扩展名的情况下查看 classList 更好的方法了。如果你不介意使用一个，那就是：availity.github.io/availity-reactstrap-validation

标签： reactstrap

【解决方案1】：

您可以通过多种方式完成此操作：由于您使用的是onChange 事件处理程序，因此您可以设置另一个状态变量。

例如，假设您有五个表单元素，您希望拥有required。每次验证元素时，将该状态变量增加一。然后通过disabled={this.state.okToSubmit != 5} 为按钮是否禁用添加条件（如果您使用的是功能组件，也可以使用挂钩来完成。

另一种选择是保持按钮处于活动状态，并在 onSubmit 处理程序中进行所有验证，但我认为大多数现代用户体验都是基于每个元素进行验证。

【讨论】：