Я пытаюсь определить, был ли контент вставлен во ввод или был введен с клавиатуры в ReactJS - PullRequest
Новая
       8

Я пытаюсь определить, был ли контент вставлен во ввод или был введен с клавиатуры в ReactJS

0 голосов
/ 10 апреля 2020

Я почти достиг своей цели, только я не уверен, что здесь все работает правильно.

Посмотрите на сам код, и вы поймете, что я имею в виду: 

const TodoApp = () => {
    const [value,setValue] = React.useState('');
  const [isPasted,setIsPasted] = React.useState(false);

  const onInput = (e) => {
    // browser returns valid result O_O
    console.log(isPasted);
    setValue(e.target.value);
  }

  const onPaste = (e) => {
    setIsPasted(true);
  }

  const onKeyUp = () => {
    setIsPasted(false);
  }


    return (
    <input 
      onInput={onInput}
      onPaste={onPaste}
      onKeyUp={onKeyUp}
      value={value}
    />
  )
}
ReactDOM.render(<TodoApp />, document.querySelector("#app"))

1 Ответ

1 голос
/ 10 апреля 2020

Может не полностью ответить на ваш фактический вопрос, но учтите, что интерфейс InputEvent имеет свойство .inputType , которое даст вам именно эту информацию, поэтому, если вы не нацеливаетесь в старых браузерах вы можете только прослушивать событие input и проверять это свойство по "insertFromPaste" constant: 

const onInput = (e) => {
  const isPasted = e.nativeEvent.inputType.startsWith("insertFromPaste");
  // ...
}


const target = document.getElementById('target');
target.oninput = (evt) => {
  const isPasted = evt.inputType && evt.inputType.startsWith("insertFromPaste");
  target.classList.toggle('is-pasted', isPasted);
};
.is-pasted { background-color: green; }
<div contenteditable id="target">edit me</div>
...