防止用户使用React native在输入文本字段中输入非数字

Question

我不想允许用户按照jquery / javascript的keypressevent的相同功能在输入中键入字母。

Answer 1

您应该在道具TextInput的白色部分使用keyboardType = {"number-pad"}组件

从“ react-native”导入{TextInput};

然后将其用作

<TextInput
   keyboardType = {"number-pad"}
   // add more props ...
/>

有关您可以添加的所有道具，请参见此link

Answer 2

通过用空字符串替换非字母字符，尝试使用JS中的replace方法。

代码

import React, { Component } from 'react';
import { AppRegistry, TextInput } from 'react-native';

export default class UselessTextInput extends Component {
  constructor(props) {
    super(props);
    this.state = { inputText: '' };
  }

  onChanged (text) {
    this.setState({
      inputText: text.replace(/[A-Za-z]/g, ''),
    });
  }

  render() {
    return (
      <TextInput
        style={{height: 40, borderColor: 'gray', borderWidth: 1, marginTop: 200}}
        onChangeText={(text)=> this.onChanged(text)}
        value={this.state.inputText}
      />
    );
  }
}

// skip this line if using Create React Native App
AppRegistry.registerComponent('AwesomeProject', () => UselessTextInput);