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

Question

我在 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 函数中目标的 classList。 但这感觉很hacky，而不是最好的方法。

React 非常新，所以非常感谢所有帮助。

Answer 1

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

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

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