Обнаружение события вставки в текстовом вводе с реагированием

Я хочу вставить в ответ собственный ввод, но сделать что-то на основе вставленного содержимого (т.е. если вставленный контент является ссылкой, соответствующим образом настройте его). Однако для этого мне нужно знать, когда что-то было вставлено в текстовый ввод. Я не уверен, как слушать событие вставки. Буфер обмена действительно не помогает здесь, потому что все, что он делает, устанавливает/получает контент, а не говорит мне, если какой-либо произвольный контент был вставлен.

Ответ 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>
    );
  }
}

вот закусочная выставка, наслаждайтесь!