ReactNative TextInput 常用方法實踐

'use strict';

var React = require('react');
var ReactNative = require('react-native');
var {
    Text,
    TextInput,
    View,
    StyleSheet,
    AppRegistry,
    Alert,
} = ReactNative;

class TextInputDemo extends React.Component {
// constructor(props) {
//   super(props);
//   this.state = { text: 'url Placeholder'};
// }
    _onChangeText(text) {
        console.log('_onChangeText called and text is', text);
    }

    _onChange(text) {
        console.log('_onChange called and text is', text);
    }

    _onEndEditing(text) {
        console.log('_onEndEditing called and text is', text);
    }

    _onFocus() {
        //點選某一個item,獲得焦點就會呼叫這個方法
        console.log('_onFocus called');
    }

    _onSelectionChange(range) {
        //當在item中選擇的位置發生變化時就會呼叫這個方法,比如第一次選擇第二個字元的位置,第二次更改為點選第一個字元位置
        var rangeText = range;
        console.log('_onSelectionChange called and range is', rangeText);
    }

    _onSubmitEditing(text) {
        console.log('_onSubmitEditing called and text is', text);
    }

render() {
  return(
      <View>
      <TextInput
      ref = 'URLTEXTINPUT'
      style = {{height: 40, borderColor: 'gray', borderWidth: 1}}
      placeholder = 'URL'
      onChangeText={(text) => this._onChangeText(text)}
      onChange = {(event)=>this._onChange('onChange text: ' + event.nativeEvent.text)}
      //onEndEditing 在文字輸入結束後會呼叫,時機為在某個框體內輸入文字後選擇鍵盤上的完成鍵或者輸入文字後將焦點手動點換到其它item上,或者輸入文字後選擇return按鈕來切換都會呼叫
      onEndEditing = {(event)=>this._onEndEditing('onEndEditing text: ' + event.nativeEvent.text)}
      //如果屬性設定了clearTextOnFocus為true,意思是第二次回到同一個itme的時候自動清空裡面的內容,    那麼onChangeText就不會被重新呼叫,那麼儲存的還是上一次的值。當判斷值不為空的情況下就會出錯。
      //這種情況下就需要判斷onSelectionChange中的range是否為0來判斷了
      clearTextOnFocus = {true}
      onFocus = {(event) =>this._onFocus}
      returnKeyType = 'next'
      onSelectionChange = {(event) =>this._onSelectionChange(event.nativeEvent.selection.start +     event.nativeEvent.selection.end)}
      //此回撥函式當軟鍵盤的確定/提交按鈕被按下的時候呼叫此函式。如果multiline={true}，此屬性不可用。還有就是輸入文字後選擇enter鍵也會呼叫此函式,和onEndEditing唯一不同的是,它在輸入框
     // 焦點切換成另外一個輸入框焦點時候不會被呼叫
     //所以如果想實現類似選擇next按鈕後將焦點自動切換到下一個item項的功能就可以在這個回撥函式中實現
      onSubmitEditing = {(event)=>this.refs.USERNAMETEXTINPUT.focus()}
      />

    <TextInput
    ref = 'USERNAMETEXTINPUT'
    style = {{height: 40, borderColor: 'gray', borderWidth: 1}}
    placeholder = 'Username'
    //當文字框內容變化的時候呼叫此回撥函式,改變後的文字內容會作為引數來傳遞, onChange一樣的情況呼叫,唯一不同的是引數不支援直接的text字串來傳遞而已
    onChangeText={(text) => this._onChangeText(text)}
    onChange = {(event)=>this._onChange('onChange text: ' + event.nativeEvent.text)}
    onEndEditing = {(event)=>this._onEndEditing('onEndEditing text: ' + event.nativeEvent.text)}
    //如果屬性設定了clearTextOnFocus為true,意思是第二次回到同一個itme的時候自動清空裡面的內容,那麼onChangeText就不會被重新呼叫,那麼儲存的還是上一次的值。當判斷值不為空的情況下就會出錯。
    //這種情況下就需要判斷onSelectionChange中的range是否為0來判斷了
    clearTextOnFocus = {true}
    onFocus = {(event) =>this._onFocus}
    returnKeyType = 'next'
    //onSelectionChange 當在文字框中的選擇內容發生變化的時候會呼叫這個方法, 簡單點兒就是游標位置和上次不同,就會呼叫。 呼叫時機包括: 選擇文字, 長點選重新定位游標位置, 輸入和刪除文字, 游標focus到不同的item時
    //這個特性就可以使用在一種使用場景下,比如 設定了clearTextOnFocus = {true}屬性,清空內容後選擇登入按鈕,此時需要監測各個輸入框是否已經有內容,那麼用textchange之類的是無法判斷出來的,
    onSelectionChange = {(event) =>this._onSelectionChange(event.nativeEvent.selection.start + event.nativeEvent.selection.end)}
    onSubmitEditing = {(event)=>this.refs.PASSWORDTEXTINPUT.focus()}
/>

    <TextInput
    ref = 'PASSWORDTEXTINPUT'
    style = {{height: 40, borderColor: 'gray', borderWidth: 1}}
    placeholder = 'Password'
    onChangeText={(text) => this._onChangeText(text)}
    onChange = {(event)=>this._onChange('onChange text: ' + event.nativeEvent.text)}
    onEndEditing = {(event)=>this._onEndEditing('onEndEditing text: ' + event.nativeEvent.text)}
    //如果屬性設定了clearTextOnFocus為true,意思是第二次回到同一個itme的時候自動清空裡面的內容,那麼onChangeText就不會被重新呼叫,那麼儲存的還是上一次的值。當判斷值不為空的情況下就會出錯。
    //這種情況下就需要判斷onSelectionChange中的range是否為0來判斷了。如果使用其它的例如changetext方法來判斷結果會得到上次儲存的結果,因為這種情況下是不會呼叫諸如此類text改變的方法的
    clearTextOnFocus = {true}
    onFocus = {(event) =>this._onFocus}
    enablesReturnKeyAutomatically = {true}
    returnKeyType = 'go'
    onSelectionChange = {(event) =>this._onSelectionChange(event.nativeEvent.selection.start + event.nativeEvent.selection.end)}
    onSubmitEditing = {(event)=>this._onSubmitEditing('onSubmitEditing text: ' + event.nativeEvent.text)}

/>

</View>
  );
}
}

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

這個demo主要實現了在選擇next按鈕的時候自動將焦點切換到下一項的功能，那麼對於目前階段實現的功能，基本的知識點如下：
onChange 和 onChangeText ：當文字框內容變化的時候呼叫此回撥函式,onChangeText改變後的文字內容會作為引數來傳遞, onChange一樣的情況呼叫,唯一不同的是引數不支援直接的text字串來傳遞而已
onEndEditing ：在文字輸入結束後會呼叫,時機為在某個框體內輸入文字後選擇鍵盤上的完成鍵或者輸入文字後將焦點手動點換到其它item上,或者輸入文字後選擇return按鈕來切換都會呼叫
onSubmitEditing ：此回撥函式當軟鍵盤的確定/提交按鈕被按下的時候呼叫此函式。如果multiline={true}，此屬性不可用。還有就是輸入文字後選擇enter鍵也會呼叫此函式,和onEndEditing唯一不同的是,
它在輸入框焦點切換成另外一個輸入框焦點時候不會被呼叫，所以如果想實現類似選擇next按鈕後將焦點自動切換到下一個item項的功能就可以在這個回撥函式中實現
onSelectionChange ：onSelectionChange 當在文字框中的選擇內容發生變化的時候會呼叫這個方法, 簡單點兒就是游標位置和上次不同,就會呼叫。 呼叫時機包括: 選擇文字, 長點選重新定位游標位置, 輸入和刪除文字, 游標focus到不同的item時這個特性就可以使用在一種使用場景下,比如 設定了clearTextOnFocus = {true}屬性,清空內容後選擇登入按鈕,此時需要監測各個輸入框是否已經有內容,那麼用textchange之類的是無法判斷出來的。

原文：ReactNative TextInput 常用方法實踐
補充參考文章：React Native - 文字輸入框（TextInput）的使用詳解