Заставить TextField с номером типа отображать точку в качестве десятичного разделителя - PullRequest
Новая
       43

Заставить TextField с номером типа отображать точку в качестве десятичного разделителя

1 голос
/ 05 ноября 2019

Я использую material-ui для рендеринга компонента TextField в моем приложении react. Это как-то заставляет все <TextField type="number /> иметь десятичный разделитель в виде запятой (,) вместо точки (.), Что вводит в заблуждение целевых пользователей.

Есть ли способ заставить его всегда показывать точку в качестве десятичного разделителя, независимо от локали?

Я создал маленький пример здесь . просто попробуйте ввести число с десятичными знаками и щелкните снаружи, и оно преобразуется в запятую. Вероятно, это связано с моим текущим языковым стандартом устройства, но все же я хочу задать точку для всех.

1 Ответ

0 голосов
/ 06 ноября 2019

В соответствии с моим предложением использовать стороннюю библиотеку для интеграции в компонент Textfield;Вы можете использовать библиотеку response-number-format в качестве inputProp для текстового поля. Это работает, потому что средство форматирования чисел, предлагаемое вышеупомянутой библиотекой, имеет decimalSeparator проп, который по умолчанию равен одной строке символов "."

Пользовательский форматер чисел будет выглядеть следующим образом: 

import NumberFormat from 'react-number-format';

interface NumberFormatCustomProps {
  inputRef: (instance: NumberFormat | null) => void;
  onChange: (event: { target: { value: string } }) => void;
}

function NumberFormatCustom(props: NumberFormatCustomProps) {
  const { inputRef, onChange, ...other } = props;

  return (
    <NumberFormat
      {...other}
      getInputRef={inputRef}
      onValueChange={values => {
        onChange({
          target: {
            value: values.value
          }
        });
      }}
      isNumericString
    />
  );
}

И его можно использовать в числовом текстовом поле, например: 

<TextField
      label="react-number-format"
      value={values.numberformat}
      onChange={handleChange("numberformat")}
      id="formatted-numberformat-input"
      InputProps={{
        inputComponent: NumberFormatCustom as any
      }}
      type="number"
/>

. Для полностью работающего примера, посмотрите эту песочницу .

...