如何在 react-native 文本输入中获取新输入的文本？答案

【问题标题】：How to get newly typed text in react-native text input?如何在 react-native 文本输入中获取新输入的文本？
【发布时间】：2017-08-25 18:29:50
【问题描述】：

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

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

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

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

有什么解决办法吗？

【问题讨论】：

标签： javascript text react-native onchange textinput

【解决方案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.

【讨论】：

【解决方案2】：

在纯 js 中解决这个问题的一种方法试试这个字符串

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

【讨论】：

不确定用户是否最终会进入。
感谢onSelectionChange获得了另一种方法

【解决方案3】：

要仅获取新输入的文本，您可以使用 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 中没有数据。因此，根据您的要求，您现在可以使用下面的代码：-

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

【讨论】：

首先我在使用event.nativeEvent.data 时不确定，如果将其更改为event.nativeEvent.text，它就可以工作。第二个是我从event.nativeEvent.text 获取全文。我在 react-native 的 v0.47.1
@VishweshJainkuniya 我已经更新了上面的答案，你可以通过这个得到你想要的输出:)
感谢onSelectionChange 获得了另一种方法。