1

故事：

我正在尝试创建一个信用卡输入文本字段。目标是在每 4、8 和 12 个字符后包含空格。

预期结果：

添加空格后，光标应保留在 textInput 的末尾

实际结果：

在 Windows 平台上，光标不会在 textInput 的末尾继续，而是在空格和最后输入的数字后面。

PS。

为了更清楚地说明这一点，我有一个小的 repo 重现了可以在这里找到的问题 https://github.com/meddyrainzo/maskedTextInput/tree/master

来自 repo 的相关代码块

使用的进口（除了来自 react 和 react-native 的常用东西） 
import valid from 'card-validator';
渲染方法 
render() {
  const { creditCardNumber } = this.state;
  const { container } = styles;
  return (
    <View style={container}>
      <TextInput
        placeholder='Enter text' 
        value={creditCardNumber}
        onChangeText={inputValue => this.onChangeTextHandler(inputValue)}
      />
    </View>
  );
}
onChangeTextHandler 方法 
onChangeTextHandler = (textInput) => {
  const card = valid.number(textInput).card || fallbackCard;    
  const maxCardLength = card.lengths[card.lengths.length -1];

  const onlyNumericValues = this.removeNonNumber(textInput);
  const cardNumberWithoutGaps = onlyNumericValues.substr(0, maxCardLength);
  const creditCardNumber = this.addGaps(cardNumberWithoutGaps);
  this.setState({creditCardNumber});
}
removeNonNumber 方法 
removeNonNumber = (string = '') => string.replace(/[^\d]/g, '');

最后，添加空格的 addGaps 方法

addGaps = (str) => {
  const gaps = [0, 4, 8, 12];
  const offsets = (gaps).concat([str.length]);

  return offsets.map((end, index) => {
    if (index === 0) return '';
    const start = offsets[index - 1];
    return str.substr(start, end - start);
  }).filter(part => part !== '').join(' ');
};

上面的所有代码块都在 repo 链接的 App.js 文件中。我仍然建议克隆 repo，以便您可以手动测试并查看 iOS 和 Android 与 Windows 的结果有何不同（对于那些感兴趣的人）。

所以我的主要问题是，有谁知道如何在 Windows 上将光标移动到 textInput 的末尾？我知道 react-native 向 textInput 添加了一个名为“selection”的道具，您可以使用它来控制光标的开始和结束位置，但检查 windows 的 react-native 代码，似乎还没有选择 prop 的实现.

使用的版本：

反应原生：0.49.3

4

0 回答 0