Practice of common methods of reactnative TextInput

' use strict ';varReact = require (' react ');varReactnative = require (' react-native ');var{Text, TextInput, View, StyleSheet, Appregistry, Alert,} = reactnative;classTextinputdemoextendsReact.component {//Constructor (props) {//super (props);//this.state = {text: ' URL Placeholder '};//} _oncha Ngetext (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 () {//click on an item and get the focus will call this method Console.log (' _onfocus called '); } _onselectionchange (range) {//when the location selected in item changes, this method is called, such as the position of the second character selected for the first time, and the second change to click the first character positionvarRangetext = 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 is called at the end of the text input, the time to select the completion key on the keyboard after entering text in a box, or to manually switch the focus to another item after entering the text. or enter text and select the return button to toggle the call onendediting = {(event) = = This. _onendediting (' onendediting text: '+ event.nativeEvent.text)}//If the property is set to Cleartextonfocus to true, meaning that the contents are automatically emptied when the second return to the same itme, then Onchangetext will not be recalled again. Then the last value is saved.
      An error occurs when the judgment value is not empty. In this case, it is necessary to determine whether the range in Onselectionchange is zero cleartextonfocus = {true} onfocus = {(event) = = This. _onfocus} Returnkeytype =' Next ' Onselectionchange = {(event) = = This. _onselectionchange (Event.nativeEvent.selection.start + event.nativeEvent.selection.end)}//This callback function when the soft keyboard is determined/ This function is called when the submit button is pressed. If Multiline={true}, this property is not available. There is also the input text after selecting the ENTER key will also call this function, and onendediting the only difference is that it will not be called when the input box//focus switch to another input box focus time//So if you want to implement a similar select Next button to automatically switch focus to the next item item function can be implemented in this callback function onsubmitediting = {(Event) = This. Refs. Usernametextinput.focus ()}/> <textinput ref =' Usernametextinput ' style = {{height:40, bordercolor:' Gray ', borderwidth:1}} placeholder =' Username ' This callback function is called when the content of the text box changes, the changed text content is passed as a parameter, onchange the same case, the only difference is that the parameter does not support the direct text string to pass it onchangetext={(text) = This. _onchangetext (text)} OnChange = {(event) = = This. _onchange (' OnChange text: '+ event.nativeEvent.text)} onendediting = {(event) = = This. _onendediting (' onendediting text: '+ event.nativeEvent.text)}//If the property is set to Cleartextonfocus to true, meaning that the contents are automatically emptied when the second return to the same itme, then Onchangetext will not be recalled again. Then the last value is saved.
    An error occurs when the judgment value is not empty. In this case, it is necessary to determine whether the range in Onselectionchange is zero cleartextonfocus = {true} onfocus = {(event) = = This. _onfocus} Returnkeytype =' Next ' Onselectionchange This method is called when the selection in the text box changes, simply because the cursor position is different from the previous one and is called. Call timing includes: Select text, long click Reposition Cursor position, enter and delete text, cursor focus to different item//This feature can be used in a usage scenario, such as setting the Cleartextonfocus = {true} property, and then selecting the Login button after emptying the content , at this time need to monitor the input box whether there is content, then with TextChange, such as can not be judged, 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)}//If the property is set to Cleartextonfocus to true, meaning that the contents are automatically emptied when the second return to the same itme, then Onchangetext will not be recalled again. Then the last value is saved.
    An error occurs when the judgment value is not empty. In this case, it is necessary to determine whether the range in Onselectionchange is determined by zero. If you use other examples such as the Changetext method to determine the result will get the last stored results, because this is not the case to call the text change method of 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);

This demo mainly implements the ability to switch focus to the next item automatically when the Next button is selected, so the basic knowledge points for the current phase implementation are as follows:

OnChange and Onchangetext: Call this callback function when the content of the text box changes, onchangetext the changed text content will be passed as a parameter, onChange the same situation call, The only difference is that the parameter does not support the direct text string to be passed.

Onendediting: After the text input is called, the time to enter text in a box after selecting the keyboard completion key or input text after the focus manually to the other item, or enter text after the return button to switch will be called

Onsubmitediting: This callback function calls this function when the OK/submit button of the soft keyboard is pressed. If Multiline={true}, this property is not available. There is also the input text after the choice of enter key will also call this function, and onendediting the only difference is that,

                 It will not be called when the input box focus is switched to another input box focus, so the ability to automatically switch focus to the next item item after you choose the Next button can be implemented in this callback function

                 This feature can be used in a usage scenario when the cursor focus is on a different item, such as setting the Cleartextonfocus = {true} property, selecting the Login button after emptying the content, and monitoring whether the input boxes already have content. So it's impossible to judge with TextChange or something.