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

Question

当用户在TextInput中键入文本时，将调用onChangeText和onChange。

• 我从onChange回调中得到了event，可以从event.nativeEvent.text那里获得新更新的文本。

• 我从onChangeText回调中获得了text，可以从中获取最新更新的文本。

但我只想要新输入的文本/字母。怎么得到这个？

例如：- 假设我们在TextInput中som为文本，现在只要用户键入e，我就只想要这个e而不是全文some。

有什么解决方法吗？

Answer 1

我们可以通过以下方式获取新输入的字母

在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.

Answer 2

在纯 js 中解决此问题的一种方法是尝试使用字符串执行此操作

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

Answer 3

要仅获取新输入的文本，您可以使用文本输入的onChange函数，如下所示：

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

按照指定，onChangeText 将为您提供完整的文本，但您可以使用 onChange 中的事件来获取新的 eneterd 字母。

编辑

根据你的反应原生新版本，你会在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的控制台中获得新输入的字母。如果我发现与此相关的任何其他内容，我会通知您，但现在您可以使用此:)