我在 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 非常新,所以非常感谢所有帮助。

#1楼 票数:1

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

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

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

  ask by Jesper translate from so

未解决问题?本站智能推荐:

1回复

如何使用可用性Reactstrap验证禁用表单提交按钮

我正在使用带有可用reactstrap验证的reactjs。 当表单有验证错误时,我想禁用表单提交按钮。 仅在没有验证错误时启用提交按钮,所有电子邮件地址均有效,所有验证均通过。 我怎样才能做到这一点? 这是我的代码。 如何禁用登录按钮? 请帮忙。
1回复

我在React/Reactstrap中有一个验证函数,我将其应用于多个字段,但是所有字段都在同时验证

到目前为止,这是我的代码(只是相关部分,我也在使用availity-reactstrap-validation 仅供参考): 验证有效,但是当我开始在其中一个字段中输入时,两个字段同时被验证。 这是有道理的,我明白为什么要这样做,但我不是 100% 确定如何更改语法以仅验证我输入的字段。 希望这是有
1回复

我希望每个项目之间都有间距,我使用的是Reactstrap表

我在tr添加了一个style ,但没有用。 我的目标是在每个项目中添加边距。 export default function StoreListing() { const [item, setItem] = useState([]); const [dropdownType, setDrop
2回复

ReactStrap句柄输入隐式提交

每当我专注于Input文本框时按Enter时,Input元素的隐式提交都会触发提交并重新加载页面: 我只想使用上述处理程序触发搜索功能,但要避免隐式提交,即单击“ Submit按钮时使用相同的功能。 否则,它只是重新加载页面并清除返回的结果。 我做错了什么? 我以前基本上没有相同的模
4回复

如何在React功能组件中使用ReactStrap获取表单/提交?

我喜欢 Reactstrap 处理Modal所以我想继续使用它,但我不知道如何从表单中获取数据并在状态中捕获它。 使用 Reactstrap 当我使用标准表单和输入元素时,我能够在 handleSubmit 中捕获我需要的内容,但是我不知道如何使用 Reactstrap 的 Form 和 Input
2回复

Reactstrap工具提示根据按钮的状态启用/禁用

我正在使用 Reactstrap(版本 6.5.0)为我的 ReactJs 项目设计样式。 我有一个带有提交按钮的内联表单。 在用户在表单中输入必填详细信息之前,此按钮处于禁用状态。 我想要实现的是以下内容: 当用户将鼠标悬停在禁用的按钮上时(即他没有填写必填的详细信息),应该会向用户显示一个to
1回复

如何使用ReactStrap向禁用的按钮添加工具提示

我有一个根据条件启用和禁用的按钮,我想向禁用按钮添加工具提示。 我不知道如何使用 reactstrap。 但这不会向按钮添加工具提示。 任何人都可以请建议我在这里做错了什么。
1回复

reactstrap字段集图例不正方形显示

我想在我的Reactjs使用BootStrap4 。 安装后, btn btn-primay css可以正常工作。 但是,我注意到该fieldset平方不见了。 我已经通过演示检查了 在这里重述一下我的片段。 index.js package.json login.js r