React Native中的TextInput (补充)

React Native中的TextInput (补充)

TextInput 的属性:

import React, { Component } from 'react';
import { AppRegistry, StyleSheet, Image, View,KeyboardAvoidingView, Text, TextInput ,Dimensions,StatusBar, TouchableHighlight, TouchableWithoutFeedback,Alert, ListView, TouchableOpacity, PixelRatio, Platform, RefreshControl, ActivityIndicator, AsyncStorage, ScrollView } from 'react-native';
export default class SearchLessons extends Component{
    constructor(props) {
        super(props);
        var ds = new ListView.DataSource({rowHasChanged: (r1, r2) => r1 !== r2});
        this.state = {
            query: '',
        };
    }
    fetchData() {
        const REQUEST = `http://api.douban.com/v2/movie/search?q=$(this.state.query)`;
        fetch(REQUEST)
        .then(response=>response.json())
        .then(responseData=>{
            console.log(responseData)
        }).done();
    }
    render() {
      return (
          <View style={styles.container}>
             <TextInput 
                style={{height:30,}}
                placeholder='默认的内容'
                clearButtonMode='always' //never 永远不显示删除 always 一直显示  
                                        while--editing  编辑的时候显示  unless-editing 按完回车才出现删除钮
                clearTextOnFocus={true}  //获取焦点时是否清空文字 、
                enablesReturnKeyAutomatically={false}  //是否自动启用回车键,有内容就显示,没有就不启用
                returnKeyType = 'go'  //回车键上的文字: go前往 join加入 next 下一项 route路线 send 发送 search 搜索 
                onChangeText={(query)=>{this.setState(query)}} //文字修改完重新给state的query赋值
                onSubmitEditing={this.fetchData.bind(this)}  //调用方法
            />

          </View>
      );
  }

}

猜你喜欢

转载自blog.csdn.net/zoepriselife316/article/details/81946895