Programmer kait reaksi baru. Di sini saya memiliki formulir ANTD, semuanya baik-baik saja kecuali perlu beberapa jenis memeriksa input, pertanyaan saya adalah, jika pengguna menulis di bidang input 'businesid', misalnya '1234' maka perlu memeriksa dari API, jika digunakan sebelumnya Maka tidak dapat melanjutkan dengan formulir, tetapi jika tidak digunakan sebelum itu baik-baik saja untuk melanjutkan. Dari API saya mendapatkan berbagai objek di mana 'businesid'. Kode saya:

 <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);
0
walee 3 April 2021, 16:55

1 menjawab

Jawaban Terbaik

Memodifikasi bisnis 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>

Fungsi 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);
    }
  }

Edit:

Untuk menunjukkan pesan sukses pada formulir Kirim:

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

Hasil:

Untuk detail Lihat solusi kerja di

1
Zunayed Shahriar 4 April 2021, 11:14