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-function中查看目标的classList。但这感觉很骇人，不是最好的方法。

React很新，因此非常感谢所有帮助。

Answer 1

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

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

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

禁用提交，直到Reactstrap中的所有字段均有效

1 个答案: