如何防止某些输入到React Native的TextInput

Question

我想禁用TextInput中某些字符的输入。如果我通过监听onKeyPress来控制输入和设置值，则该组件将闪烁，如React Native文档中的warned一样。还有其他方法可以实现这一目标吗？

Answer 1

使用onChangeText更改TextInput对我来说很好。

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

export default class PizzaTranslator extends Component {
  constructor(props) {
    super(props);

    this.state = {
      text: ''
    };
  }

  changeText(text) {
    let newText = text.replace("a", "b");
    this.setState({ text: newText });
  }

  render() {
    return (
      <View style={{padding: 10}}>
        <TextInput
          style={{height: 40}}
          placeholder="Type here!"
          onChangeText={(text) => this.changeText(text)}
          value={this.state.text}
        />
      </View>
    );
  }
}

您只需要在changeText函数中将这些字符替换为空即可。