Question

如果我有一个带有onPaste事件的Reactjs输入文本元素，我怎样才能获得响应中的粘贴值？

目前我在控制台中得到的是一个SyntheticClipboardEvent，其所有属性都为null。我读到console.log是一个异步检查程序，这就是为什么大多数值为null，因为它们正在向前看。

但是我想知道如何获得价值。

干杯

Answer 1

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

Answer 2

这里可能是使用React钩子的一个更简单的“不粘贴”示例

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

Answer 3

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

格式是Unicode字符串，给出数据的类型或格式，通常由MIME类型给出。一些不是MIME类型的值由于遗留原因（例如＆＃34; text＆＃34;）。

示例：

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'));
}

Answer 4

首先包括Facebook DataTransfer模块：

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();
},

欢迎你;）

Answer 5

这段代码检查粘贴之前和之后的输入值之间的差异，我认为它不受任何浏览器支持的限制。这是Jsfiddle

Multiply

function getDifference(oldval, newval)
{
    var i = 0;
    var j = 0;
    var result = "";

    while (j < newval.length)
    {
        if (typeof (oldval[j]) === "undefined"){
           if (oldval[j-result.length] != newval[j]){
              result += newval[j];
           }  
        }else{
           if (oldval[j] != newval[j]){
              result += newval[j];
           }  
        }
            
        j++;
    }
    return result;
}

class TodoApp extends React.Component {
  constructor(props) {
    super(props)
    this.state={
      pasting: false,
      beforePasting : ""
    };
   this.paste = this.paste.bind(this);
   this.change = this.change.bind(this);
  }
  
  paste(e){
    this.setState({pasting: true, beforePasting: e.target.value});
  }
  change(e){
    if(this.state.pasting){
      var oldval = this.state.beforePasting;
      var newval = e.target.value;
      var pastedValue = getDifference(oldval, newval);
      console.log(pastedValue);
      this.setState({pasting: false});
    }
  }
  
  render() {
    return (
      <div>
         <input type="text" onPaste={this.paste} onChange={this.change} />
      </div>
    )
  }
}

ReactDOM.render(<TodoApp />, document.querySelector("#app"))

body {
  background: #20262E;
  padding: 20px;
  font-family: Helvetica;
}

#app {
  background: #fff;
  border-radius: 4px;
  padding: 20px;
  transition: all 0.2s;
}

input {
  margin-right: 5px;
}

PS：此代码段中存在一些错误，请改为检查jsfiddle

Answer 6

可以在clipboardData上找到数据，并按如下方式解析为字符串：

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

Answer 7

对我来说这是快速且有效的。

onPaste事件在更改输入值之前触发。

所以我们需要使用e.persist（）

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

如何从Reactjs onPaste事件中获取粘贴值

7 个答案: