TextInput_文本处理

 React Native 学习随笔，有不同意见尽情发表！

1简单的例

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

class PizzaTranslator extends Component {
   constructor(props) {

    super(props);
    this.state = {text: ''};
  }

  endEditing(param) {
     alert(param)
  }

  submiteContext(param) {
     alert(param)
  }

  render() {
    return (
      <View style={{padding: 10}}>
        <TextInput
          style={styles.textIPStyle}
          placeholder="Type here to translate!"
          onChangeText={(text) => this.setState({text})}
          keyboardType = "numeric"
          multiline = {true}
          numberOfLines = {2}
          //设置键类型
          returnKeyType={'done'}
          clearButtonMode={'while-editing'} // 输入框右边 x 按钮
          underlineColorAndroid ={"transparent"} 
          onEndEditing={(event) => this.endEditing( // 退出键盘
                    'onEndEditing text: ' + event.nativeEvent.text)}
          onSubmitEditing={(event) => this.submiteContext( // 数据提交
                    'onSubmitEditing text: ' + event.nativeEvent.text)}
        />
        <Text style={{padding: 10, fontSize: 42}}>
          {this.state.text.split(' ').map((word) => word && '�').join(' ')}
        </Text>
         <Text></Text>
      </View>
    );
  }

}// 注册应用(registerComponent)后才能正确渲染// 注意：只把应用作为一个整体注册一次，而不是每个组件/模块都注册AppRegistry.registerComponent( 'PizzaTranslator', () => PizzaTranslator);

  上面代码， (text) => this .setState({text}) 是箭头函数，参数是text，代码块设置TextInput变化后的值， 再来看这行代码{ this .state.text.split( ' ' ).map((word) => word && '�' ).join( ' ' )}， split()方法把字符串text以 ' ' 分割为数组，map是迭代器遍历这个数组，

(word) => word &&  '�'的作用是把数组的每个元素替代为'�'。

假如我们要实现当用户输入时，实时将其以单词为单位翻译为另一种文字。我们假设这另一种文字来自某个吃货星球，只有一个单词： �。所以"Hello there Bob"将会被翻译为"���"。

2 TextInput几个重要属性

keyboardType enum("default", 'numeric', 'email-address', "ascii-capable", 'numbers-and-punctuation', 'url', 'number-pad', 'phone-pad', 'name-phone-pad', 'decimal-pad', 'twitter', 'web-search') 

决定弹出的何种软键盘的，譬如numeric（纯数字键盘）。

这些值在所有平台都可用：

• default
• numeric
• email-address

使用：

keyboardType = "numeric"

maxLength number 

限制文本框中最多的字符数。使用这个属性而不用JS逻辑去实现，可以避免闪烁的现象。

 maxLength = {10}

multiline bool （直接使用无效果）参考例2

如果为true，文本框中可以输入多行文字。默认值为false。

numberOfLines number （直接使用无效果）参考例2

设置输入框的行数。当multiline设置为true时使用它，可以占据对应的行数

secureTextEntry bool 

如果为true，文本框会遮住之前输入的文字，这样类似密码之类的敏感文字可以更加安全。默认值为false

placeholder：占位符，在输入前显示的文本内容

value：文本输入框的默认值

autoCapitalize ：首字母自动大写。可选值有： none 、 sentences 、 words 、 characters 。

underlineColorAndroid string 

文本框的下划线颜色(译注：如果要去掉文本框的边框，请将此属性设为透明transparent)

3 常见的几个方法

onChangeText function 

当文本框内容变化时调用此回调函数。改变后的文字内容会作为参数传递

constructor(props) {
    super(props);
    this.state = {text: ''};
  }

 onChangeText={(text) => this.setState({text})}

onEndEditing function 

当文本输入结束后调用此回调函数

 endEditing(param) {
        alert(param)
    }
 onEndEditing={(event) => this.endEditing( // 退出键盘
                    'onEndEditing text: ' + event.nativeEvent.text
                )}

onSubmitEditing function 

此回调函数当软键盘的确定/提交按钮被按下的时候调用此函数。如果multiline={true}，此属性不可用

submiteContext(param) {
        alert(param)
    }
onSubmitEditing={(event) => this.submiteContext( // 数据提交
                    'onSubmitEditing text: ' + event.nativeEvent.text
                )}

3实例

例1 状态变化

var TextEventsExample = React.createClass({

  //这个是Es5中的方法 初始化状态  
  // getInitialState 方法用于定义初始状态，也就是一个对象，
  //这个对象可以通过 this.state 属性读取。当用户点击组件，导致状态变化，this.setState 方法就修改状态值，每次修改以后，自动调用 this.render 方法，再次渲染组件                                         
  getInitialState: function() {
    return {
      //记录当前状态
      curText: '',
      //记录前一个状态
      prevText: '',
      //记录前前一个状态
      prev2Text: '',
    };
  },

  updateText: function(text) {
    this.setState((state) => {
      return {
        curText: text,
        prevText: state.curText,
        prev2Text: state.prevText,
      };
    });
  },

  render: function() {
    return (
      <View>
        <TextInput
          //不自动切换任何字符为大写
          autoCapitalize="none"
          //占位符
          placeholder="Enter text to see events"
          //关闭拼写自动修正
          autoCorrect={false}
          //当文本框获得焦点的时候调用此回调函数
          onFocus={() => this.updateText('onFocus')}
          //当文本框失去焦点的时候调用此回调函数
          onBlur={() => this.updateText('onBlur')}
          //当文本框内容变化时调用此回调函数
          onChange={(event) => this.updateText(
            'onChange text: ' + event.nativeEvent.text
          )}
          //当文本输入结束后调用此回调函数
          onEndEditing={(event) => this.updateText(
            'onEndEditing text: ' + event.nativeEvent.text
          )}
          //此回调函数当软键盘的确定/提交按钮被按下的时候调用此函数。如果multiline={true}，此属性不可用
          onSubmitEditing={(event) => this.updateText(
            'onSubmitEditing text: ' + event.nativeEvent.text
          )}
          style={styles.singleLine}
        />
        <Text style={styles.eventLabel}>
          {this.state.curText}{'\n'}
          (prev: {this.state.prevText}){'\n'}
          (prev2: {this.state.prev2Text})
        </Text>
        <Text></Text>
      </View>
    );
  }
});

这里牵涉到getInitialState ：

React 把组件看成是一个状态机（State Machines）。通过与用户的交互，实现不同状态，然后渲染 UI，让用户界面和数据保持一致。

React 里，只需更新组件的 state，然后根据新的 state 重新渲染用户界面（不要操作 DOM）。

以下实例中创建了 LikeButton 组件，getInitialState 方法用于定义初始状态，也就是一个对象，这个对象可以通过 this.state 属性读取。当用户点击组件，导致状态变化，this.setState 方法就修改状态值，每次修改以后，自动调用 this.render 方法，再次渲染组件。

上面的updateText也可以改成如下：

updateText: function(text) {
    this.setState({
        curText: text,
        prevText: this.state.curText,
        prev2Text: this.state.prevText,
    });
  },

例2 换行

class AutoExpandingTextInput extends React.Component {
  constructor(props) {
    super(props);
    //初始化状态 
    this.state = {text: '', height: 0};
  }

  render() {
    return (
      <TextInput
        {...this.props}
        multiline={true}
        onChange={(event) => {
          //修改文本 和高度 每次修改状态时，React都重新渲染UI，使用户的状态和数据保持一致
          this.setState({
            text: event.nativeEvent.text,
            height: event.nativeEvent.contentSize.height,
          });
        }}
        style={[styles.default, {height: Math.max(35, this.state.height)}]}
        value={this.state.text}
      />
    );
  }
}

上面的代码， event.nativeEvent.text 是获取TextInPut文本， event.nativeEvent.contentSize.height 获取TextInPut 的高度。

例3 限制输入

class RewriteExample extends React.Component {
  constructor(props) {
    super(props);
    //初始化状态
    this.state = {text: ''};
  }
  render() {
    //字符限制数量
    var limit = 20;
    //剩余的可输入的字符
    var remainder = limit - this.state.text.length;
    //如果剩余可输入的字符数少于5 显示红色否则显示蓝色
    var remainderColor = remainder > 5 ? 'blue' : 'red';
    return (
      <View style={styles.rewriteContainer}>
        <TextInput
          multiline={false}
          maxLength={limit}
          onChangeText={(text) => {
           //如果输入的是空格 则使用 '_' 替换
            text = text.replace(/ /g, '_');
            this.setState({text});
          }}
          style={styles.default}
          value={this.state.text}
        />
        <Text
         style={[styles.remainder, {color: remainderColor}]}>
          {remainder}
        </Text>
        <Text></Text>
      </View>
    );
  }
}

例4 输入空格+#字符变为蓝色

hashtag: {
    color: 'blue',
    fontWeight: 'bold',
  },

class TokenizedTextExample extends React.Component {
  constructor(props) {
    super(props);
    this.state = {text: 'Hello #World'};
  }
  render() {

    //define delimiter 正则表达式  查找空白字符
    let delimiter = /\s+/;

    //split string
    let _text = this.state.text;
    let token, index, parts = [];
    while (_text) {
      // lastIndex 一个整数，标示开始下一次匹配的字符位置               
      delimiter.lastIndex = 0;
      //检索字符串中指定的值。返回找到的值，并确定其位置 [" ", index: 5, input: "Hello #World"] 
      // " " 是返回找到的值 index 是字符" " 所在的位置   属性input 被查找的字符串
      token = delimiter.exec(_text);
      //如果没有查找到就中断查找
      if (token === null) {
        break;
      }
      //字符" " 所在的位置
      index = token.index;
      if (token[0].length === 0) {
          index = 1;
      }
      //向数组的末尾添加一个或更多元素，并返回新的长度
      parts.push(_text.substr(0, index));
      parts.push(token[0]);
      console.log(parts);//["Hello", " "]
      index = index + token[0].length;
      //提取字符串的某个部分，并以新的字符串返回被提取的部分 语法 str.slice(start,end)  
     // 返回一个新的字符串，包含从 start 到 end （不包括该元素）的 str 中的元素
      _text = _text.slice(index);
    }
    
    parts.push(_text);
    console.log(parts);//["Hello", " ", "#World"]
    //highlight hashtags
    parts = parts.map((text) => {
      if (/^#/.test(text)) {//检索字符串中指定的值。返回 true 或 false
        return <Text key={text} style={styles.hashtag}>{text}</Text>;
      } else {
        return text;
      }
    });

    return (
      <View>
        <TextInput
          multiline={true}
          style={styles.multiline}
          onChangeText={(text) => {
            this.setState({text});
          }}>
          <Text>{parts}</Text>
        </TextInput>
      </View>
    );
  }
}

Input：

Hello #Eirc next to meet you !

output：

Hello  #Eirc next to meet you !

上面的代码中有几个方法需要注意下：

/\s+/  正则表达式查找空格字符  

/^#/ 正则表达式查找 #

re.exec(str)  根据正则表达式查找字符串 返回找到的值 和其位置 re是正则表达式对象 str是被查找的对象 例： [" ", index: 5, input: "Hello #World"]

re.test (str) 检索字符串中是否包含默个字符，返回 true 或 false 了解 更多

str.slice（start,end） 从旧的字符串中提取一个新的字符串，start 开始的位置 end 结束的位置

了解更多。

自学资料：

TextInPut(多个语法知识)

正则表达式