如果创建大写字母,则 TextInput 值上的 toLowerCase 会创建重复文本

IT技术 android reactjs react-native
2021-05-06 23:19:03

这是一个有趣的。

我创建了一个 TextInput,它接受一个值,然后将其小写,将其添加到状态,并将其设置为默认值。在我的 android 物理设备上,如果您强制使用大写字母(自动大写设置为无),然后快速点击其他字母,它将复制并添加额外的文本。

有没有办法避免这种情况?

这是小吃https://snack.expo.io/Hk1reKHJ4

在你的安卓或模拟器上运行它,点击键盘上的大写按钮,点击其他几个字母,再次点击大写,点击其他几个字母,你应该设置这个错误。

谢谢!

export default class App extends React.Component {
  constructor(props) {
    super(props)
    this.state = {
      text: ''
    }
  }
  render() {
    return (
      <View style={styles.container}>
        <TextInput
          style={ styles.inputContainer }
          defaultValue={ this.state.text }
          autoCapitalize="none"
          onChangeText={ value => this.setState({ 
            text: value.trim().toLowerCase()
            })}
        />
      </View>
    );
  }
}
4个回答

不幸的是,这是一个已经开放了几年没有解决方案的问题,您可以查看此线程,没有人找到解决方案。在 React Native 团队修复这个 bug 之前有一个临时的解决方法,因为它似乎需要太长时间,请在此处查看

在里面添加这三行TextInput,应该可以解决问题,原始答案来源

 autoCapitalize="none"
 secureTextEntry={true}
 keyboardType={"visible-password"}

例如,请参阅我的这个答案

autoCapitalize props对我有用。

autoCapitalize="none"

我不同意所选的答案。其中提供的链接对我有用。

secureTextEntry={Platform.OS === 'ios' ? false : true}
keyboardType={Platform.OS === 'ios' ? null : 'visible-password'}
autoCapitalize="characters"

https://github.com/facebook/react-native/issues/11068#issuecomment-586346549