TextInput仅允许数字响应本机

时间:2018-09-08 12:41:09

标签: react-native expo

我正在使用TextInput仅允许数字使用state,它在android上有效,但在iOS上无效。这是我使用状态仅允许数字的方式。

handleInputChange = (text) => {

  if (/^\d+$/.test(text) || text === '') {
    this.setState({
      text: text
    });
  }
}

我的渲染方法

render = () => {
  return (
    <View style={{
      flex: 0,
      flexDirection: 'row',
        alignItems: 'flex-end',
        marginTop: 50
    }}>
      <View style={{ flex: 0, marginLeft: 10 }}>
        <Text style={{ fontSize: 20}}>$</Text>
      </View>
      <View style={{flex: 1,}}>
        <TextInput
          onChangeText={this.handleInputChange}
          value={this.state.text}
          underlineColorAndroid='transparent'
          autoCorrect={false}
          spellCheck={false}
          style={{ paddingLeft: 5, fontSize: 20 }} />
      </View>
    </View>
  );
}

enter image description here

这只能在Android中使用,我想是因为状态已更改react不会更新ui。

5 个答案:

答案 0 :(得分:2)

请尝试以下操作:

  1. keyboardType='numeric'在标签TextInput
  2. 当您证明没有将数字与计算机键盘一起输入时,请使用仿真器的键盘
  3. 如果仍然无法使用,请放这个textContentType='telephoneNumber'

答案 1 :(得分:1)

正如Ravi Rupareliya所说,这是一个错误,当状态文本比当前TextInput值短时,TextInput不会更新。似乎该错误已在react-native 0.57.RC中修复。目前,我正在使用以下修复程序。

handleInputChange = (text) => {

    const filteredText = text.replace(/\D/gm, '');

    if(filteredText !== text) {
      // set state text to the current TextInput value, to trigger
      // TextInput update.
      this.setState({ text: text });

      // buys us some time until the above setState finish execution
      setTimeout(() => {

        this.setState((previousState) => {
          return {
            ...previousState,
            text: previousState.text.replace(/\D/gm, '')
          };
        });

      }, 0);
    } else {
      this.setState({ text: filteredText });
    }
}

enter image description here

答案 2 :(得分:0)

未提供反应本机的keyboardType可以从键盘上删除标点符号。您需要使用带有replace方法的正则表达式从文本中删除标点符号并设置keyboardType = 'numeric'

正则表达式

  

/ [-#*;,.. <> {} [] /] / gi

示例代码

 onTextChanged(value) {
    // code to remove non-numeric characters from text
    this.setState({ number: value.replace(/[- #*;,.<>\{\}\[\]\\\/]/gi, '') });
  }

请检查小吃链接

https://snack.expo.io/@vishal7008/1e004c

答案 3 :(得分:0)

为我工作:

var1=c(1, 2, 3, 0, 2)
var2=c(3, 6, 0, 1, 2)
set.seed(1)
n=10000
rand <- replicate(n, sample(var1))
rand1 <- replicate(n, sample(var2))

library(matrixStats)
colwiseSpearman <- function(m1, m2, correct=TRUE){
    require(matrixStats)
    n <- dim(m1)[2]
    l <- dim(m1)[1]
    if (correct){
        Txy <- t(sapply(seq_len(n), function(x){
            t0 <- tabulate(rand[,x])
            t1 <- tabulate(rand1[,x])
            return(c(Tx=sum(t0^3-t0)/12, Ty=sum(t1^3-t1)/12))
        }))
        return(((l^3-l)/6 - rowSums((colRanks(rand, ties.method="average")-colRanks(rand1, ties.method="average"))^2) - Txy[,1] - Txy[,2])/sqrt(((l^3-l)/6 - 2*Txy[,1])*((l^3-l)/6 - 2*Txy[,2]))) # Spearman cor.coeff. corrected for ties 
    } else {
        return(1-(6*rowSums((colRanks(rand, ties.method="average")-colRanks(rand1, ties.method="average"))^2) / (l^3-l)))}
}

library(microbenchmark)
microbenchmark(a=colwiseSpearman(rand, rand1),
               b=as.numeric(sapply(seq_len(n), function(x) cor.test(rand[,x], rand1[,x], method="spearman")$estimate)), times=10L )
#> Unit: milliseconds
#>  expr        min         lq       mean    median         uq       max neval cld
#>     a   65.47719   68.06543   74.83393   69.2682   72.90266  109.9133    10  a 
#>     b 2769.97084 2789.39907 2826.01399 2821.6867 2849.08012 2880.5115    10   b
a <- colwiseSpearman(rand, rand1)
b <- as.numeric(sapply(seq_len(n), function(x) cor.test(rand[,x], rand1[,x], method="spearman")$estimate))
all.equal(a, b)
#> [1] TRUE

答案 4 :(得分:0)

在获得用户输入的同时,您可以更改特定文本输入框的键盘类型,例如数字或字母等。

<TextInput>
  //contains some code
  keyboardType="Numeric"
</TextInput>