Reactjs onPaste 이벤트에서 값을 붙여넣는 방법

Reactjs onPaste 이벤트에서 값을 붙여넣는 방법

Reactjs 입력 텍스트 요소에 onPaste 이벤트가 할당되어 있는 경우, 어떻게 응답에 붙여넣은 값을 얻을 수 있습니까?

현재 콘솔에 표시되는 것은 SyntheticClipboardEvent로 모든 속성이 null로 되어 있습니다.console.log는 비동기 체커이므로 대부분의 값이 null이 됩니다.

하지만 어떻게 하면 그 가치를 얻을 수 있을지 궁금합니다.

건배.

onPaste: function(e) {
    console.log(e.clipboardData.getData('Text'));
},

https://developer.mozilla.org/en-US/docs/Web/API/DataTransfer/types

형식은 데이터의 유형 또는 형식을 제공하는 Unicode 문자열로, 일반적으로 MIME 유형에 의해 지정됩니다.MIME 유형이 아닌 일부 값은 레거시 이유로 특수 대문자화됩니다(예: "텍스트").

예:

onPaste: function(e) {
    console.log(e.clipboardData.getData('Text'));
    console.log(e.clipboardData.getData('text/plain'));
    console.log(e.clipboardData.getData('text/html'));
    console.log(e.clipboardData.getData('text/rtf'));

    console.log(e.clipboardData.getData('Url'));
    console.log(e.clipboardData.getData('text/uri-list'));
    console.log(e.clipboardData.getData('text/x-moz-url'));
}

리액트 훅을 사용한 간단한 '붙여넣기 없음' 예를 다음에 나타냅니다.

export default function NoPasteExample() {
  const classes = useStyles();
  const [val, setVal] = React.useState("");
  const [pasted, setPasted] = React.useState(false);

  const handleChange = e => {
    if (!pasted) {
      setVal(e.target.value);
    }
    setPasted(false);
  };

  const handlePaste = () => {
    setPasted(true);
  };
  return (
    <form className={classes.root} noValidate autoComplete="off">
      <div>
        <TextField
          value={val}
          onPaste={handlePaste}
          onChange={e => handleChange(e)}
        />
      </div>
    </form>
  );
}

라이브 데모: https://codesandbox.io/s/material-demo-w61eo?fontsize=14&hidenavigation=1&theme=dark

데이터는 에서 찾을 수 있습니다.clipboardData, 및 다음과 같이 문자열로 해석됩니다.

event.clipboardData.items[0].getAsString(text=>{
  // do something
})

나에게 이것은 빠르고 효과가 있다.

onPaste 이벤트는 입력 값이 변경되기 전에 실행됩니다.

따라서 e.persist()를 사용해야 합니다.

<input 
   onPaste={(e)=>{
    e.persist();
    setTimeout(()=>{ this.handleChange(e)},4)}
   }
   value={this.state.value}/>

먼저 Facebook Data Transfer 모듈을 포함합니다.

var DataTransfer = require('fbjs/lib/DataTransfer');

다음 작업을 수행할 수 있습니다.

onPaste: function (evt) {
       var data = new DataTransfer(evt.clipboardData);

       var text = data.getText();
       var html = data.getHTML();
       var files = data.getFiles();
},

어서 오세요;)

언급URL : https://stackoverflow.com/questions/32814363/how-to-get-pasted-value-from-reactjs-onpaste-event