ANTD - Как изменить входное значение при размытии другого входа

Question

Я использую ANTD 4.1.2V, и у меня есть вход, который получает номер почтового индекса в форме

Когда происходит событие onblur, я вызываю API, передавая значение почтового индекса, и он возвращает мне адресная информация.

Что мне нужно сделать, так это заполнить другие входы этими значениями, когда событие onBlur запускается при вводе почтового индекса.

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;

Кто-нибудь знает, как это решить?

Answer 1

Можно так

 // 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
  };