ANTD - How to change input value when blur another input - reactjs

Question

I'm using ANTD 4.1.2V and I have an input that receives a Zip code number within a form
When onblur event happens, I call a API passing the Zip code value and it returns me the address info.
What I need to do is to fill the others inputs with that values when onBlur event is triggered in Zip code input.
import React, { useState } from 'react';
import { Form, Input, Row, Col } from 'antd';
import MaskedInput from 'antd-mask-input';
import zipCodeAPI from '../../services/zipCodeAPI';
const ClientForm = () => {
const [loadingCep, setLoadingZipCode] = useState(false);
const [, setZipCode] = useState('');
const onChangePfCep = (value) => setZipCode(value);
const handleZipCode = async (cep) => {
setLoadingZipCode(true);
const { data } = await zipCodeAPI(cep);
const { street } = data;
setPublicPlace(street);
setLoadingZipCode(false);
};
return (
<Form
name="client-form"
onFinish={() => console.log('Test')}
layout="vertical"
initialValues={{ ...initialValues, layout: 'vertical' }}
>
<Row gutter={16} justify="space-between">
<Col span={3}>
<Form.Item label="ZIP CODE" name="zip_code">
<MaskedInput
mask="11111-111"
size="8"
onChange={({ target }) => onChangePfCep(target.value)}
// When onBlur here
onBlur={() => handleZipCode('04223-000')}
placeholder="XXXXX-XXX"
/>
</Form.Item>
</Col>
<Col span={7}>
<Form.Item label="Logradouro" name="street">
{/* Fill this input with the zipcodeAPI payload */}
<Input disabled />
</Form.Item>
</Col>
<Col span={2}>
<Form.Item label="Number" name="number">
{/* Fill this input with the zipcodeAPI payload */}
<Input />
</Form.Item>
</Col>
<Col span={5}>
<Form.Item label="Neighborhood" name="neighborhood">
{/* Fill this input with the zipcodeAPI payload */}
<Input disabled />
</Form.Item>
</Col>
</Row>
</Form>
);
};
export default ClientForm;
Does anybody know how to solve this?

Answer 1

You can do it like this
// you need to get the form instance from the useForm hook
const form = useForm();
const handleZipCode = async (cep) => {
setLoadingZipCode(true);
const { data } = await zipCodeAPI(cep);
const { street, number, neighborhood } = data; // changed
setPublicPlace(street);
setLoadingZipCode(false);
form.setFieldsValue({neighborhood, number, street}) // changed
};