3.文本框处理

Posted 2020-08-09 阿甘左

  参考：http://reactnative.cn/docs/0.31/handling-text-input.html#content

1.TextInput类似于OC中的UITextField和UITextView。一个可以让用户输入文本的基础组件。它有一个名为onChangeText的属性, 此属性接收一个函数,这个函数会在属性值变化的时候调用,类似于OC中键值观察, KVO机制。  相当于dideditChangeTextControlEvent事件有着同样的作用。

  另外还有一个名为OnSubmitEditing的属性。会在文本提交后应用。按下键盘上的提交按钮,相当于UITextField中 的didEndOnExit事件。

   栗子：

  

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

class PizzaTranslator extends Component {
  constructor(props) {
    super(props);
    this.state = {text: ‘‘};
  }

  render() {
    return (
      <View style={{padding: 10}}>
        <TextInput
          style={{height: 40}}
          placeholder="Type here to translate!"
          onChangeText={(text) => this.setState({text})}
        />
        <Text style={{padding: 10, fontSize: 42}}>
          {this.state.text.split(‘ ‘).map((word) => word && ‘??‘).join(‘ ‘)}
        </Text>
      </View>
    );
  }
}
// 注册应用(registerComponent)后才能正确渲染
// 注意：只把应用作为一个整体注册一次，而不是每个组件/模块都注册
AppRegistry.registerComponent(‘PizzaTranslator‘, () => PizzaTranslator);