如何在反应原生文本输入中获取新输入的文本?
当用户输入TextInput
中的文本时,将调用onChangeText
和onChange
。如何在反应原生文本输入中获取新输入的文本?
我正在从
onChange
回调event
并且可以得到新的event.nativeEvent.text
更新的案文。我得到
text
从onChangeText
回调,并可以从中获取新的更新文本。
但我只想要新输入的文本/字母。如何得到这个?
例如: - 让我们假设我们有som
文本中TextInput
,现在只要用户类型e
,我想只有这e
,而不是整个文本some
。
任何解决方法?
我们可以通过
获取新输入的字母在您的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.
要获得不仅可以使用如下的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的控制台中新输入的字母。我会让你知道,如果我找到别的与此相关的,但是现在你可以用这个:)
一个解决这个纯JS试试这个以字符串方式获得工作
getNewChar(str){
return str[str.length - 1];
}
不知道用户会一直输入。 –
感谢通过'onSelectionChange'获得了另一种方法 –
首先我使用'事件正在越来越不确定。 nativeEvent.data',如果它改为'event.nativeEvent.text',它就会工作。第二个是我从'event.nativeEvent.text'获取整个文本。我在v0.47.1反应原生 –
@VishweshJainkuniya我已经更新了上面的答案,你可以通过这个得到你想要的输出:) –
感谢通过'onSelectionChange'的另一种方法。 –