React Native TextInput仅允许数字响应本机

70gysomp  于 2023-01-14  发布在  React
关注(0)|答案(7)|浏览(222)

我使用TextInput来只允许数字使用状态,它在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>
  );
}

这只适用于Android,我猜是因为状态已经改变,react不会更新UI。

yzuktlbb

yzuktlbb1#

请尝试以下操作:
1.标签TextInput中的keyboardType='numeric'
1.当你证明不要把数字与你的电脑键盘,请使用模拟器的键盘
1.如果仍然不工作,则放置此textContentType='telephoneNumber'

zphenhs4

zphenhs42#

正如Ravi Rupareliya所说,这是一个bug,当状态文本比当前的TextInput值短时,TextInput不会更新。看起来这个bug已经在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 });
    }
}

sqxo8psd

sqxo8psd3#

React本机未提供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

xmd2e60i

xmd2e60i4#

对我有效:

<TextInput 
   ...
   textContentType='telephoneNumber' 
   dataDetectorTypes='phoneNumber' 
   keyboardType='phone-pad'
/>
hkmswyz6

hkmswyz65#

虽然有用户输入,你可以改变键盘类型,为该特定的文本输入框,如这即数字或字母等...

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

s3fp2yjn6#

<TextInput>
  keyboardType="number-pad"
</TextInput>
m528fe3b

m528fe3b7#

onChangeText={value => setuserPrimaryPhone(value.replace(/[^0-9]/g, ''))}

javascript简单方法replace(/[^0-9]/g, ''))}

相关问题