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

Question

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

我正在从 onChange 回调中获取 event，并且可以从 event.nativeEvent.text.
我正在从 onChangeText 回调中获取 text，并且可以从中获取最新更新的文本。

但是我只想要新输入的text/letters。如何获得？

例如：- 假设我们在 TextInput 中有 som 作为文本，现在一旦用户键入 e，我只想要这个 e全文 some。

有解决办法吗？

Answer 1

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

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

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

编辑

根据您的 React Native 较新版本，您在 event.nativeEvent.text 中获得了完整的新文本，在 event.nativeEvent.data[= 中没有数据27=]。因此，根据您的要求，您现在可以使用以下代码：-

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

Answer 2

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

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

Answer 3

我们可以通过

获取新输入的字母

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

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

How to get newly typed text in react-native text input?

javascript

text

onchange

textinput

react-native