008_ReactNative: TextInput

(问渠那得清如许,为有源头活水来。 双手奉上RN官网)

TextInput 基本的获取用户输入内容的组件. onChangeText属性可以关联一个当文本发生变化时的处理函数. onSubmitEditing属性可以关联一个当文本提交时的处理函数.


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="请输入用于转换的文字!"
//           关联当文字发生变化时的处理函数
          onChangeText={(text) => this.setState({text})}
        />
        <Text style={{padding: 10, fontSize: 42}}>
          {/*转换文字*/}
          {this.state.text.split(' ').map((word) => word && '🍕').join(' ')}
        </Text>
      </View>
    );
  }
}

AppRegistry.registerComponent('PizzaTranslator', () => PizzaTranslator);

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容