如何解决如何使用按钮道具动态禁用antd模式按钮
我有一个蚂蚁模态，我正在尝试验证一个字段并为其提供验证。如何基于验证启用/禁用“确定”按钮。如果验证成功，则应启用按钮，否则应禁用。
<Form>
<Modal
title={modalHeader}
okText="ADD FIELD"
cancelText="CANCEL"
visible={visible}
onCancel={onCancelHandler}
onOk={() => onAddFieldHandler(fieldName)}
width={600}
okButtonProps={{disabled:true}}
>
<p>Please provide name</p>
<Form.Item
name="fieldName"
rules={[{ required: true,message: 'Please enter name' }]}
>
<FieldNameInput
placeholder="Field name..."
value={fieldName}
onChange={(event) => setFieldName(event.target.value)}
/>
</Form.Item>
</Modal>
</Form>
解决方法
在我的情况下，我在模态中有 Form 并且有 onFieldChange 道具，当您可以传递函数以执行某些操作时，由于更改而您可以这样做：
#include<stdio.h>
#include<queue>
int arr[5][5] = {
{00,00,01,00},{01,01},};
int output[5][5];
// two arrays that help with directions
int dx[8] = {-1,-1,1,0},dy[8] = {1,-1};
int vis[5][5];
int count = 1;
std::queue<int> qx,qy;
void bfs(int x,int y){
// start bfs my pushing starting position into respective queues
// and marking starting position as visited
qx.push(x); qy.push(y);
vis[x][y] = 1;
output[x][y] = count;
// loop until queue is empty
while (!qx.empty()){
int cur_x = qx.front(),cur_y = qy.front();
qx.pop(); qy.pop();
// loop 0..8,for 8 directions
for (int i=0; i<8; i++){
// make sure next node fits constraints
if (cur_x + dx[i] >= 0 && cur_x + dx[i] < 5){
if (cur_y + dy[i] >= 0 && cur_y + dy[i] < 5){
// check if next node has not been visited
// and its position in arr is 1
if (vis[ cur_x + dx[i] ][ cur_y + dy[i] ] == 0 &&
arr[ cur_x + dx[i] ][ cur_y + dy[i] ] == 1){
// mark next node as visited
// and push into queue
vis[ cur_x + dx[i] ][ cur_y + dy[i] ] = 1;
qx.push(cur_x + dx[i]);
qy.push(cur_y + dy[i]);
output[ cur_x + dx[i] ][ cur_y + dy[i] ] = count;
}
}
}
}
}
}
int main(){
for (int i=0; i<5; i++){
for (int j=0; j<5; j++){
if (arr[i][j] == 1 && vis[i][j] == 0){
// bfs will fill one "section"
bfs(i,j);
count++;
}
}
}
// print output
for (int i=0; i<5; i++){
for (int j=0; j<5; j++){
printf("%d ",output[i][j]);
}
printf("\n");
}
// printf("%d\n",count);
}
当然需要在字段上有一些验证器
const SomeModal = ({ visible }) => {
const [form] = Form.useForm();
const [buttonDisabled,setButtonDisabled] = useState(true);
const handleOk = () => form.submit();
const handleAfterClose = () => {
setButtonDisabled(true);
form.resetFields();
}
const handleCancel = () => ...some action to hide modal;
const handleFormFinish = (values) => {
... some logic here
}
return (
<Modal
title={"Some title..."}
visible={visibile}
onOk={handleOk}
onCancel={handleCancel}
afterClose={handleAfterClose}
okButtonProps={{ disabled: buttonDisabled }}
>
<Form
form={form}
layout="vertical"
name="acceptform"
onFinish={handleFormFinish}
initialValues={{
...initial values here
}}
onFieldsChange={() => {
const actualFieldValues = form.getFieldsValue();
const anyError = form.getFieldsError().some((field) => field.errors.length > 0);
.. some logic if error etc..
if (anyError) {
setButtonDisabled(true);
}
else {
setButtonDisabled(false);
}
}}
>
和验证器看起来很像：
<Form.Item
label={"someLabel"}
id="field"
name="field"
hasFeedback
rules={[
{
type: "string",validator: async (rule,value) => inputFieldValidate(value,"custom message")
},]}
>
很高兴知道验证器 isasync 并使其在没有任何警告的情况下工作，只需处理承诺
,您可以将Antd Forms API中的onFieldsChange与geFieldsError和Antd Modal API中的okButtonProps结合使用。
const [form] = Form.useForm();
const [buttonDisabled,setButtonDisabled] = useState(true);
return (
<Modal
...
okButtonProps={{ disabled: buttonDisabled }}
>
<Form
form={form}
...
onFieldsChange={() =>
setButtonDisabled(
form.getFieldsError().some((field) => field.errors.length > 0)
)
}
>
这里是工作中的Stackblitz。
,在模态中使用表单，更新模态按钮状态的方法就是运行 form instance's validateFields，但有两件事需要考虑：
-
这个函数是一个 Promise，所以状态必须在
await之后用验证结果更新。 -
我在使用
onFieldsChange时遇到了一些循环问题（可能验证会触发某种字段更新）。相反，onValuesChange对我来说已经足够好了。 -
在
setTimeout回调中运行验证似乎是强制性的。即使所有字段都由于setTimeout而有效，但在没有outOfDate: true的情况下执行此操作会返回验证错误。似乎是因为 Antd Form 更新生命周期的工作方式，等到这个过程结束（我们可以用setTimeout轻松实现）解决了这个问题。
成功的验证返回表单值对象，失败的验证返回带有错误列表、errorInfo 状态和当前表单值的 outOfDate 对象。您可以使用后者中的错误列表来获取 Antd 返回的验证消息，以显示更具描述性和特定性的反馈。
最后，我的方法具有以下结构：
const MyModal = ({onFinish,...otherProps}) => {
const [canSubmit,setCanSubmit] = useState(false);
const [form] = Form.useForm();
return (
<Modal
{...otherProps}
okButtonProps={{
disabled: !canSubmit
}}
>
<MyFormComponent
form={form}
onFinish={onFinish}
onValuesChange={() => {
setTimeout(() => {
form
.validateFields()
.then(() => {
/*
values:
{
username: 'username',password: 'password',}
*/
setCanSubmit(true);
})
.catch((err) => {
/*
errorInfo:
{
values: {
username: 'username',},errorFields: [
{ name: ['password'],errors: ['Please input your Password!'] },],outOfDate: false,}
*/
setCanSubmit(false);
});
});
}}
/>
</Modal>
);
};
版权声明：本文内容由互联网用户自发贡献，该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容， 请发送邮件至 dio@foxmail.com 举报，一经查实，本站将立刻删除。