RN入门基础7：文本输入（TextInput）

一、介绍

TextInput是一个允许用户输入文本的基础组件。

它有一个名为onChangeText的属性，此属性接受一个函数，而此函数会在文本变化时被调用。

还有一个名为onSubmitEditing的属性，会在文本被提交后（用户按下软键盘上的提交键）调用。

二、举例

我们将用户输入的单词全部翻译为‘LL’

1.首先导入组件Textinput

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

2.之后创建属性text保存文字

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

3.全部代码

//将输入的单词换成LL
export default class myprojectname extends Component{
    constructor(props){
        super(props);
        this.state = {text: ''}
    }
    render(){
        return(
            <View style={ {padding: 12}}>
                <TextInput
                    style={ {height:40}}
                    placeholder="请 输 入 文 字!"
                    onChangeText={ (text) => this.setState({text})}
                />

                <Text style={{padding: 10, fontSize: 42}}>
                    { this.state.text.split(' ').map((word) => word && 'LL').join(' ') }
                </Text>
            </View>
        );
    }
}

4.效果