如何在反应原生文本输入中获取新输入的文本？

当用户输入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'获得了另一种方法 –

如何在反应原生文本输入中获取新输入的文本？

回答

相关问题