我如何禁用表单提交按钮使用antd
表单验证工作,但我需要可视化禁用表单提交按钮时,验证失败
这是一个堆栈 lightning 战url https://stackblitz.com/edit/react-ts-z5d6tr?file=Hello.tsx
我如何禁用表单提交按钮使用antd
表单验证工作,但我需要可视化禁用表单提交按钮时,验证失败
这是一个堆栈 lightning 战url https://stackblitz.com/edit/react-ts-z5d6tr?file=Hello.tsx
7条答案
按热度按时间js81xvg61#
我找到了一种优雅的方式来表演
gwbalxhn2#
我将把我的解决方案粘贴在这里,以防有人觉得有用。该解决方案使用挂钩X1 M0 N1 X和回调X1 M1 N1 X。
验证并没有包含在这个摘录中,但是当表单改变(任何字段)时,它会将提交按钮(在这个例子中是在Modal中)设置为禁用/启用。
lsmepo6l3#
我发现了一个很好的解决方案,它不涉及任何额外的状态。如果你把提交按钮 Package 成这样的
Form.Item
,它应该禁用它,直到所有必填字段都完成。表单的其余部分将保持不变。gcmastyq4#
7kqas0il5#
这个解决方案对我很有效!
bogh5gae6#
我有一个很好的解决方案,没有任何额外的重新呈现(重新评估)成本!!我用Form.Item控制按钮组件,因为它将值属性传递给按钮,并且当按钮属性更改时,React会重新评估它,所以如果我们在按钮内部使用此值属性来禁用和启用,问题将得到解决!!例如:
dddzy1tm7#
我在这里做了一些编辑:https://stackblitz.com/edit/react-ts-spuhdd?file=Hello.tsx
总结一下我所做的:
1.我创建了钩子用户名,密码和禁用
1.每次用户更改用户名和密码时,如果这些字段为空,则disabled设置为false。
1.如果执行onFinishFailed,则此disabled设置为true。
1.当disabled为true时,按钮变为禁用状态。如果disabled属性变为false,按钮再次变为可单击状态。