在reactjs中提交后，如何禁用ANTD表格提交按钮？

Question

我有这样的ANTD表格： -

<Form {...layout} form={form} name={formTitle(window.location.pathname)} onFinish={submitForm}>
    <Form.Item name="name" label="Name" rules={NAME_VALIDATION}>
        <Input value={name} onChange={({ target: { value, } }) => setName(value)}/>
    </Form.Item>
    <Form.Item {...tailLayout}>
        <Button type="primary" htmlType="submit">{formCardTitle(window.location.pathname)}</Button> &nbsp;
        <Button htmlType="button" onClick={onReset}>
        Reset
        </Button>
    </Form.Item>
</Form>

我想禁用表单上的提交按钮。类似的内容： -

const submitForm = async () => {
    .................
    .................
    // disable submit button
}

我知道如何在表单中禁用按钮，类似的内容： -

<Button type="primary" htmlType="submit" disabled={!(name)}>
{formCardTitle(window.location.pathname)}
</Button>

但是我只想在表单提交后仅在submitform（）函数内禁用按钮。 我该怎么做？

Answer 1

您可以将其用于布尔

这里一个示例

import { useState } from "react";

const Form = () => {
const [name, setName] = useState("");
const [email, setEmail] = useState("");
const [btnDisable, setBtnDisable] = useState(false);


const emailHandler = (e) => setEmail(e.target.value);
const nameHandler = (e) => setName(e.target.value);

const submitHandler = (e) => {
e.preventDefault();
if (!name && !email.includes("@")) {
  return;
}
const data = { name, email };
// send data to backend;
// after the sent data successfully
setBtnDisable(true);

//clear the input fields
setName("");
setEmail("");
};

return (
<form onSubmit={submitHandler}>
  <input type="text" value={name} onChange={nameHandler} />
  <input type="email" value={email} onChange={emailHandler} />
  <button type="submit" disabled={btnDisable}>
    submit
  </button>
</form>
 );
};
export default Form;