时间戳

首页 > 解决方案 > 如何在 React-Native 中实现输入文本屏蔽？

reactjs - 如何在 React-Native 中实现输入文本屏蔽？

问题描述

需要掩码：90.99%，其中：9 - 可选数字 0 - 需要 %，。- 相关字符 '%' 和 '.'

例如： 输入/结果

1 ---> 1%
12 ---> 12%
12.1 ---> 12.1%
12.12 ---> 12.12%

我正在使用redux-form

我已经尝试过react-native-text-input-mask和react-native-masked-text，但是，这些包中没有类似的功能（在第一个包中有类似的东西，但是 '%' 正确显示仅当它在数字之前使用但这个字符应该在之后）

标签： reactjsreact-nativeinputreact-native-androidmasking

解决方案

这里最好的方法是在输入本身旁边提供掩码。这在很大程度上取决于您如何使用 Field 组件（您甚至使用它吗？）。

您可以尝试使用formatField 上的道具。

或者您可以提供自己的组件来呈现字段并提供自己的格式功能：

const renderPercentagedInput = (field) => {
  function onChange(evt) {
    const value = evt.target.value;
    const numbers = value.replace(/[^0-9.,]/g, '')
    field.input.onChange(numbers + '%')
  }

  return (
    <TextInput
      {...field.input}
      onChangeText={onChange}
    />
  );
}

推荐阅读