React Native中的TextInput (补充)

React Native中的TextInput (补充)react

TextInput 的属性：web

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> ); } }

本文同步分享在博客“zoepriselife316”（CSDN）。
若有侵权，请联系 support@oschina.cn 删除。
本文参与“OSC源创计划”，欢迎正在阅读的你也加入，一块儿分享。json