Я хочу вставить в ответ собственный ввод, но сделать что-то на основе вставленного содержимого (т.е. если вставленный контент является ссылкой, соответствующим образом настройте его). Однако для этого мне нужно знать, когда что-то было вставлено в текстовый ввод. Я не уверен, как слушать событие вставки. Буфер обмена действительно не помогает здесь, потому что все, что он делает, устанавливает/получает контент, а не говорит мне, если какой-либо произвольный контент был вставлен.
Обнаружение события вставки в текстовом вводе с реагированием
Ответ 1
Вы можете сохранить 2 копии ввода в состоянии, при этом 1 копия будет предыдущим состоянием входа, а другая будет состоянием текущего входа. Пример:
Actual input: asd
this.state={copy_one: "as", copy_two: "asd"}
Actual input: asdgoogle.com
this.state={copy_one: "asd", copy_two: "asdgoogle.com"}
Вы можете обновить их, выполнив
this.setState({copy_one: this.state.copy_two, copy_two: currentValue})
на каждом триггере опоры onChange. Если вы специально ищете изменения, быстрый и грязный взлом, чтобы получить только разницу, будет удалять исходную строку с помощью замены
difference = this.state.copy_two.replace(this.state.copy_one, "")
то вы можете использовать регулярное выражение, чтобы увидеть, есть ли ссылка и стилизовать его соответственно.
Ответ 2
Для людей, которые натолкнулись на этот пост из Google и не нашли удачи, как я, к счастью, я нашел решение.
Идея проста, каждый раз, когда текст меняется, я буду сравнивать его с содержимым из буфера обмена. Это.
Минимальный пример кода
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>
);
}
}
вот закусочная выставка, наслаждайтесь!