Изменить числовой формат поля ввода в режиме редактирования строки таблицы Antd?

Question

Я использую Табличный компонент Ant Design v2.x и не могу выполнить обновление. Я хотел бы изменить форматирование чисел в режиме редактирования строк, поскольку в настоящее время оно несовместимо: в режиме отображения у меня есть немецкое форматирование (по желанию), но как только я нажимаю edit, числа форматируются с использованием американских десятичных разделителей:

Я понимаю, что компонент таблицы инкапсулирует компонент Input-Number , который имеет параметр decimalSeparator, который я должен отрегулировать. Для меня совсем не очевидно, как я могу передать этот параметр из свойства столбца родительского (табличного) компонента в базовый компонент входного номера.

В качестве минимальной базы кода для Продемонстрируем это, давайте рассмотрим пример кода Typescript из https://ant.design/components/table/#components -table-demo-edit-row и сосредоточимся на столбце age. Предположим, что это не age, а Значение (например, сделка). (Правильное) форматирование во 2-й строке моего скриншота я получаю с помощью функции render, например:

x.toLocaleString("de-DE", { style: 'currency', currency: ccy, currencyDisplay: "code", maximumFractionDigits: 2 });

, где x - значение, которое нужно отформатировать, а ccy - валюта. -строка для отображения, на снимке экрана она была просто пустой.

Что я я могу сделать, так это указать, является ли столбец number, string или что-то другое. В исходном коде примера соответствующая часть:

interface Item {
  key: string;
  name: string;
  age: number;
  address: string;
}

Надеемся на вашу помощь!

Answer 1

InputNumber имеет свойства formatter и parser, которые вы можете использовать для форматирования денежных значений.

Еще один более простой вариант, который я бы рекомендовал, - использовать маску ввода. Вот пример, включающий формат числа-реакции :

import React, { useState } from "react";
import ReactDOM from "react-dom";
import NumberFormat from "react-number-format";
import { Table, Input, Form } from "antd";

const EditableCell = ({
  editing,
  dataIndex,
  title,
  inputType,
  record,
  index,
  children,
  ...restProps
}) => {
  const inputNode =
    inputType === "number" ? (
      <NumberFormat
        customInput={Input}
        thousandSeparator="."
        decimalSeparator=","
        decimalScale={2}
      />
    ) : (
      <Input />
    );
  return (
    <td {...restProps}>
      {editing ? (
        <Form.Item
          name={dataIndex}
          style={{
            margin: 0
          }}
          rules={[
            {
              required: true,
              message: `Please Input ${title}!`
            }
          ]}
        >
          {inputNode}
        </Form.Item>
      ) : (
        children
      )}
    </td>
  );
};

Кроме того, вы можете проверить живой пример здесь .

Answer 2

Путем проб и ошибок я наконец понял, как работают formatter и parser компонента InputNumber, документации на https://2x.ant.design/components/table/

практически не было. В итоге я сделал следующее, что не совсем красиво, но работает:

<InputNumber
  defaultValue={this.props.value !== null ? parseFloat(this.props.value) : null}
  // This is what 2x.antd.design suggests to do it:
  // formatter={value => ` ${value}`.replace(/\B(?=(\d{3})+(?!\d))/g, ',')}
  // parser={value => value.replace(/\$\s?|(,*)/g, "")}

  // This my solution for German numbers
  formatter={value => ` ${value}`.replace(/\./,',').replace(/\B(?=(\d{3})+(?!\d))/g, '.')}
  parser={x => parseFloat(`${x}`.replace(/,/, '#').replace(/\./g, '').replace(/#/,'.')) }  

  onChange={this.handleChange}
/>

Идея formatter состоит в том, чтобы сначала заменить десятичный разделитель . на ,. replace(/\B(?=(\d{3})+(?!\d))/g, ',') должен найти глобально все 3-di git группы \d{3} и заменить любой разделитель тысяч на ., \B(?=(\d{3})+(?!\d)) найдет все, кроме последнего ,.

Перед тем, как записывать данные обратно в переменную состояния this.props.value, мы должны отменить эту замену, поэтому сначала мы заменяем запятую как десятичный разделитель некоторым заполнителем #, затем удаляем все . в строке и, наконец, делаем верните заполнитель на . в качестве десятичного разделителя, который можно понять как parseFloat.