Блог

Как создать поле, которое получает свое значение от объединения двух других полей с помощью форм ant?

Например, у меня есть First Name поле и Last Name поле.

Я хочу Full Name , чтобы поле представляло собой комбинацию Имени и Фамилии. При обновлении имени или фамилии Full Name поле также должно обновляться.

Я попытался настроить dependencies Full Name поле, но я не уверен, как обновить значение полного имени и прослушать изменения.

Согласно документам:

Если в поле есть реквизит «Зависимости», это поле автоматически инициирует обновления и проверки

Как прослушивать эти обновления, которые автоматически запускаются?

Обновить

Это моя попытка:

 const TestI = ({value, onChange}) => {
  console.log("L19 value:", value);
  console.log("L20 onChange", onChange);
  return <Input value={value} onChange={onChange} />;
}

const RegistrationForm = () => {
  const [form] = Form.useForm();

  const onFinish = values => {
    console.log('Received values of form: ', values);
  };

  return (
    <Form form={form} name="register" onFinish={onFinish} scrollToFirstError>
      <Form.Item name="FirstName" label="First Name">
        <Input />
      </Form.Item>
      <Form.Item name="LastName" label="Last Name">
        <Input />
      </Form.Item>
      <Form.Item
        dependencies={['FirstName', 'LastName']}
        name="FullName"
        label="Full Name"
        rules={[
          () => {
            return {
              validator(_, value) {
                console.log('validating l40...value', value);
                return Promise.resolve();
              }
            };
          }
        ]}
      >
        <TestI />
      </Form.Item>
    </Form>
  );
};
 

Проблема, по-видимому, в том, что Full Name обновляется только тогда, когда оно «грязное» (значение не является начальным значением), и даже тогда проверка выполняется только при изменении одной из его зависимостей.

Попробуй это. Но ниже решение использовало крючки формы antd (так как вы также использовали его)

 const [form] = Form.useForm();

const onValuesChange = (changedValues, allValues) => {
    const fieldName = Object.keys(changedValues)[0];
    if (fieldName === "FirstName" || fieldName === "LastName") {
        const FirstName =
            changedValues["FirstName"] || allValues["FirstName"] || "";
        const LastName =
            changedValues["LastName"] || allValues["LastName"] || "";

        form.setFieldsValue({ FullName: `${FirstName} ${LastName}` });
    }
};

const onFinish = values => {
    console.log('Received values of form: ', values);
};

<Form
    form={form}
    name="register"
    onFinish={onFinish}
    scrollToFirstError
    onValuesChange={onValuesChange}
>
    <Form.Item name="FirstName" label="First Name">
        <Input />
    </Form.Item>
    <Form.Item name="LastName" label="Last Name">
        <Input />
    </Form.Item>
    <Form.Item name="FullName" label="Full Name">
        <Input />
    </Form.Item>
</Form>
 

Вся логика происходила при обратном вызове onValuesChange

Смотрите пример здесь: