如何在反應原生文本輸入中獲取新輸入的文本？

當用戶輸入TextInput中的文本時，將調用onChangeText和onChange。如何在反應原生文本輸入中獲取新輸入的文本？

我正在從onChange回調event並且可以得到新的event.nativeEvent.text更新的案文。
我得到text從onChangeText回調，並可以從中獲取新的更新文本。

但我只想要新輸入的文本/字母。如何得到這個？

例如： - 讓我們假設我們有som文本中TextInput，現在只要用戶類型e，我想只有這e，而不是整個文本some。

任何解決方法？

來源

2017-08-25 Vishwesh Jainkuniya

我們可以通過

獲取新輸入的字母

在您的Input中使用onSelectionChange道具。我們可以從onSelectionChange獲得event，從中我們可以得到cursor的位置。通過cursor的位置和全文，我們可以很容易得到新輸入的字母。

例子： -

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

和方法

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

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

現在，只要你想新輸入的字母，把它

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.

來源

2017-08-26 11:05:03

要獲得不僅可以使用如下的TextInput的的onChange功能的新輸入的文本： -

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

符合規定onChangeText會給你完整的文本，但你可以使用來自的onChange事件得到新的敵人的信。

編輯

根據你的反應，你得到完整的新文本event.nativeEvent.text本地新版本和event.nativeEvent.data沒有數據。因此，對於你的要求，你可以用下面的代碼現在： -

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

你會得到你的newLetter的控制檯中新輸入的字母。我會讓你知道，如果我找到別的與此相關的，但是現在你可以用這個:)

來源

2017-08-25 18:46:02

首先我使用'事件正在越來越不確定。 nativeEvent.data'，如果它改爲'event.nativeEvent.text'，它就會工作。第二個是我從'event.nativeEvent.text'獲取整個文本。我在v0.47.1反應原生 –

@VishweshJainkuniya我已經更新了上面的答案，你可以通過這個得到你想要的輸出:) –

感謝通過'onSelectionChange'的另一種方法。 –

一個解決這個純JS試試這個以字符串方式獲得工作

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

來源

2017-08-25 18:57:45

不知道用戶會一直輸入。 –

感謝通過'onSelectionChange'獲得了另一種方法 –

如何在反應原生文本輸入中獲取新輸入的文本？

回答

相關問題