如果写了特定的东西，antd 输入字段的条件

Question

新的 React Hook 程序员。这里我有 antd 表单，一切都很好，除了需要对输入进行某种检查，我的问题是，如果用户在 'businesId' 输入字段上写入，例如“1234”，则需要从 api 进行检查，如果之前使用过，则无法继续表单，但如果之前未使用过，则可以继续。从 api 我得到一个对象数组，其中 'businesId'。我的代码：

 <div>
      <Form.Item label={"name"} name="name">
        <Input type="string" />
      </Form.Item>
      <Form.Item label={"businesId"} name="businessId">
        <Input type="string" />
      </Form.Item>
      <Form.Item>
        <Button type="primary" htmlType="submit">
          {"submit"}
        </Button>
      </Form.Item>
    </div>

  const [orders, setOrders] = useState();
    const api = useContext(ApiContext);

  
   useEffect(() => {
    api.custApi.apiCustGet().then((res) => {
      setOrders(res);
    });
  }, [api.custApi]);
    console.log(orders);

Answer 1

修改后的 BusinessId Form.Item:

<Form.Item label={"businesId"} name="businessId">
    <Input
        type="string"
        disabled={loading}
        onChange={(e) => handleInput(e.target.value)}
    />
    {isInvalidBusinessId ? (
        <span className="error-text">{errorMessage}</span>
    ) : null}
</Form.Item>

handleInput 函数:

function handleInput(value) {
    setIsInvalidBusinessId(false);
    if (value.length) {
      setLoading(true);
      // You will call api.custApi.apiCustGet() here
      if (orders.filter((f) => f.businessId === value).length) {
        setIsInvalidBusinessId(true);
      }
      setLoading(false);
    }
  }

编辑：

要在表单提交时显示成功消息：

const onFinish = (values) => {
    // You determine your success logic here
    setIsSubmitSuccess(true);
    setTimeout(() => {
      setIsSubmitSuccess(false);
    }, 2000); // Two seconds interval
  };

结果：

有关详细信息，请参阅 CodeSandbox 处的工作解决方案。

如果写了特定的东西，antd 输入字段的条件

conditions on antd input field if written specific thing

html

javascript

typescript

reactjs

antd