Как получить немаскированное значение из MaskedTextField - FluentUI

Question

Я использую компонент MaskedTextField из библиотеки Microsoft FluentUI. Я пытаюсь получить незамаскированное значение от компонента, но безуспешно. Я пробовал как подход с управляемыми компонентами, передавая значение реквизитам, так и подход с неконтролируемыми компонентами, передавая значение по умолчанию в реквизиты; и проверил свойства компонента в обработчике событий OnChange, но не нашел свойства, в котором хранится немаскированное значение.

Правильно ли я поступаю? есть ли обходной путь?

Спасибо!

Answer 1

Используя императивный API, можно получить немаскированное значение. Одно важное предостережение из документов:

Значение всех заполненных символов формата или undefined, если заполнены не все символы формата

Вот пример который извлекает значение при нажатии кнопки:

const TextFieldBasicExample: React.FunctionComponent = () => {
  const [val, setVal] = React.useState("");
  const [fetchedValue, setFetchedValue] = React.useState("");
  const ref = React.useRef(null);
  const fetchValue = React.useCallback(() => {
    setFetchedValue(ref.current.value);
  }, [setFetchedValue, ref]);
  const obj = {val, fetchedValue};
  return (
    <>
    setVal(theVal)} />
Get value
   {JSON.stringify(obj, null, 2)}

); };

( полный рабочий пример )

Если этот API не соответствует вашим потребностям, вероятно, стоит открыть проблему , т.к. есть несколько простых способов улучшить это.