如何停止在 textInput React Native 中输入空格？答案

【问题标题】：How to stop entering whitespace in textInput React Native?如何停止在 textInput React Native 中输入空格？
【发布时间】：2018-02-14 11:12:12
【问题描述】：

如何在 React Native 的密码输入框中停止输入空格？

password 可以是任何字符，包括空格。

我试过这个：validator.js

const extract = (str, pattern) => (str.match(pattern) || []).pop() || '';

export function removeWhiteSpace(str) {
  return extract(str, '/^\S*$/;');
}

login.js

passwordHandle(value){
  this.setState({
      password:removeWhiteSpace(value)
  })
  console.log(removeWhiteSpace(value))
}

渲染（）

<View style={{paddingBottom:25}}>
  <TextField 
    label='Password'
    type='password' 
    value={password}
    error={errors.password}
    icon
    onChange={this.passwordHandle}/>
  <Image 
    source={require('../../../assets/img/lock.png')}
    style={styles.icon} />
</View>

但它不起作用。它只执行 '/^\S*$/;'来自removeWhiteSpace。

【问题讨论】：

你的removeWhiteSpace() 函数是什么，为什么当值不是空格时调用它？
我现在编辑了我的问题。@Dyo

标签： javascript reactjs react-native

【解决方案1】：

这个简单的正则表达式应该可以使用 .replace 函数：

passwordHandle(value){
   this.setState({
       password: value.replace(/\s/g, '')
   })
}

【讨论】：

完美的回答拯救了我的一天，非常感谢 Dyo
我有用户名。如何删除空格（超过 1 个空格以及文本中前缀和后缀中的空格）。以上将替换所有空间。如果用户有两个名字，例如 Jiffan Joe。在这里，我需要两个名称，中间有一个空格。并非所有空格
@sejn 也许你必须使用下面的答案，使用 trim()

【解决方案2】：

如果您只关心在字符串的末尾（或前面）输入空格，您也可以使用原型 String 对象中的 trim()。

passwordHandle(value){
   this.setState({
       password: value.trim()
   })
}

【讨论】：

trim 并不完美，因为您仍然可以在字符串之间添加空格..
@VaibhavGidde 这就是为什么我说“如果你只关心在字符串的末尾（或前面）输入的空格”。在我的回答中。掌心

【解决方案3】：

您可以像这样简单地验证 onChangeText 函数中的空格

onChangeText={(text) => {
 if (text.includes(' ')) {
   setText(text.trim()); 
  } else {
   setText(text);
  }
 }
}

【讨论】：