Detect insert event in response text input

Question

I want to insert my own input into the response, but do something based on the inserted content (i.e. if the inserted content is a link, configure it accordingly). However, for this I need to know when something was inserted into the text input. I am not sure how to listen to the insert event. The clipboard really does not help here, because everything that it does sets / receives the content, and does not tell me if any arbitrary content has been pasted.

Answer 1

You can save 2 copies of input in a state, with 1 copy being the previous state of the input, and the other being the state of the current input. Example:

Actual input: asd this.state={copy_one: "as", copy_two: "asd"} Actual input: asdgoogle.com this.state={copy_one: "asd", copy_two: "asdgoogle.com"} 

You can update them by doing

 this.setState({copy_one: this.state.copy_two, copy_two: currentValue}) 

on each trigger supports onChange. If you are specifically looking for changes, a quick and dirty hack, in order to get only the difference, will delete the original line with a replacement

 difference = this.state.copy_two.replace(this.state.copy_one, "") 

then you can use the regex to see if there is a link and style it accordingly.

Answer 2

For people who came across this post from Google and did not find luck, as I, fortunately, I found a solution.

The idea is simple, every time the text changes, I will compare it with the contents from the clipboard. It.

Minimal code example

 export default class App extends React.Component { handleOnPaste = (content) => { alert('paste detected! content: '.concat(content)); } handleOnChangeText = async (content) => { if (content === '') return; const copiedContent = await Clipboard.getString(); if (copiedContent === '') return; const isPasted = content.includes(copiedContent); if (isPasted) this.handleOnPaste(content); } render() { return ( <View style={styles.container}> <TextInput placeholder={'fill something'} style={styles.input} onChangeText={this.handleOnChangeText} /> </View> ); } } 

here is a snack exhibition , enjoy!