Wie bekomme ich neu eingegebenen Text in reaktionsnative Texteingabe?

Question

Wenn Benutzer Text in TextInput eingeben, werden onChangeText und onChange genannt.

• Ich erhalte event von onChange Rückruf und können neu Text von event.nativeEvent.text aktualisiert.

• Ich bekomme text von onChangeText Rückruf und kann neu aktualisierten Text von ihm erhalten.

Aber ich möchte nur neu eingegebenen Text/Buchstaben. Wie bekomme ich das?

Zum Beispiel: - können wir in TextInput, jetzt sobald Benutzertyp esom als Text übernehmen haben, möchte ich nur diese e statt Volltext some.

Irgendwelche Arbeiten herum?

Answer 1

Wir können Erhalten Sie neu eingegebene Buchstaben über

Verwenden Sie onSelectionChange Requisiten in Ihrem Input. Wir können einen event von onSelectionChange bekommen, von dem wir cursor Position bekommen können. Durch cursor Position und Volltext können wir leicht neu eingegebene Buchstaben bekommen.

Beispiel: -

 <Input 
     ... 
     onChangeText={this.handleMessageChange} 
     onSelectionChange={this.handleMessageSelectionChange} 
     ... 
     /> 

und Methoden

handleMessageChange = (message: string) => { 
    this.setState({ message }); 
    }; 

handleMessageSelectionChange = (event: Object) => { 
    const { selection } = event.nativeEvent; 
    this.setState({ selection }); 
    }; 

Nun, wenn Sie neu eingegebenen Buchstaben wollen, bekommen sie

getNewlyEnteredLetters =(): string => { 
     const { selection, message } = state; 
     const { start, end } = selection; 
     return start === end ? message[start -1 ] : message[message.length - 1] 
     }; // start === end implies that new letters are entered and not selection is made. 

Answer 2

Um nur den neu eingegebenen Text erhalten Sie die wie unten onChange Funktion von TextInput- verwenden: -

<TextInput 
    onChange={(event) => {console.log(event.nativeEvent.data)}} 
    onChangeText={(val) => {console.warn(val)}} 
/> 

Da die onChangeText angegeben werden Sie den vollständigen Text geben, aber Sie das Ereignis aus onChange verwenden können um den neuen Brief zu bekommen.

EDIT

Nach Ihren reagieren nativen neuere Versionen Sie den kompletten neuen Text in event.nativeEvent.text und keine Daten in event.nativeEvent.data bekommen. Also für Ihre Anforderung können Sie den Code für die jetzt verwendet werden: -

   <TextInput 
       onChange={(evnt)=>{ 
         let newText = []; 
         let oldText = []; 

        for(let i=0;i<evnt.nativeEvent.text.length;i++) { 
         newText.push(evnt.nativeEvent.text[i]); 
         if(this.state.val[i]) { 
          oldText.push(this.state.val[i]);         
         } 
        } 
        let newLetter = ''; 
        for(let j=0;j<newText.length;j++) { 
         if(newText[j] !== oldText[j]) { 
          newLetter = newText[j]; 
          break; 
         } 
        } 
        console.log(newLetter); 
       }} 
       onChangeText={(val)=>{ 
        console.log(val); 
        this.setState({val}); 
       }} 
      /> 

Sie die neu eingegebenen Buchstaben innerhalb der Konsole von newletter bekommen. Ich werde Sie wissen lassen, wenn ich dies alles andere im Zusammenhang finden, aber jetzt können Sie diese mit bekommen arbeiten :)

Answer 3

Eine Möglichkeit versuchen, dies mit der Zeichenfolge dieses in reiner js zu lösen

getNewChar(str){ 
    return str[str.length - 1]; 
}