时间戳

首页 > 解决方案 > 如何从 MaskedTextField 获取未屏蔽的值 - FluentUI

office-ui-fabric - 如何从 MaskedTextField 获取未屏蔽的值 - FluentUI

问题描述

我正在使用 Microsoft FluentUI 库中的 MaskedTextField 组件。我试图从组件中获取未屏蔽的价值，但没有成功。我尝试了通过将值传递给道具的受控组件方法，以及通过将默认值传递给道具的不受控制的组件方法；并检查了 OnChange 事件处理程序中的组件属性，但我没有发现存储未屏蔽值的属性。

我做对了吗？有什么解决方法吗？

谢谢！

标签： office-ui-fabricoffice-ui-fabric-reactfluent-ui

解决方案

使用命令式 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 (
    <>
   <MaskedTextField ref={ref} label="With input mask" mask="m\ask: (999) 999 - 9999" value={val} onChange={(_, theVal) => setVal(theVal)} />
<button onClick={fetchValue}>Get value</button>
   <pre>{JSON.stringify(obj, null, 2)}</pre>
    </>
  );
};

（完整的工作示例）

如果此 API 不能满足您的需求，可能值得打开一个问题，因为有几种直接的方法可以改进它。

推荐阅读