Обработать событие onPaste в React-Примеры кода

Victor Talmacinschi

Обработать событие onPaste в React

JavaScript от Victor Talmacinschi June 16, 2022

import React, { useState } from 'react';

function App() {
  // Отслеживать, что было вставлено в состояние
  const [pastedText, setPastedText] = useState('');

  // Обновлять состояние при вставке пользователем что-либо
  const handlePaste = e => {
    // Получить данные из буфера обмена
    const clipboardData = e.clipboardData || window.clipboardData;
    // Получить вставленные данные в виде текста
    const pastedData = clipboardData.getData('text');
    // Обновить состояние с вставленными данными
    setPastedText(pastedData);
  };

  return (
    <div>
      <h1>Обработать событие onPaste в React</h1>
      <textarea
        onPaste={handlePaste}
        placeholder="Вставьте сюда что-нибудь!"
      ></textarea>
      {/* Показывать вставленный текст только тогда, когда его есть для отображения */}
      {pastedText && <p>{pastedText}</p>}
    </div>
  );
}

export default App;

0

27.469

Обработайте событие onPaste в React

JavaScript от Victor Talmacinschi June 16, 2022

import React, { useState } from 'react';

function App() {
  const [text, setText] = useState('');

  function handlePaste(e) {
    // Получить данные из буфера обмена
    const clipboardData = e.clipboardData || window.clipboardData;
    // Получить вставленные данные
    const pastedData = clipboardData.getData('Text');
    // Обновить состояние
    setText(pastedData);
  }

  return (
    <div>
      <h1>Обработать событие onPaste в React</h1>
      <textarea
        value={text}
        onPaste={handlePaste}
      />
    </div>
  );
}

export default App;

0

12.864

Похожие JavaScript запросы

Последние JavaScript запросы

Изучите примеры кода по категориям