Javascript 如何从 Reactjs onPaste 事件中获取粘贴值
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/32814363/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
How to get pasted value from Reactjs onPaste event
提问by Aiden Rigby
if i have an Reactjs input text element with onPaste event assigned to it, how could I get the pasted value in the response?
如果我有一个带有 onPaste 事件的 Reactjs 输入文本元素，我怎么能在响应中获得粘贴的值？
at the moment what i get in the console is a SyntheticClipboardEvent with all properties as null. I read that the console.log is a async checker so thats why the majority of values are null as they are looking ahead.
目前我在控制台中得到的是一个 SyntheticClipboardEvent，所有属性都为空。我读到 console.log 是一个异步检查器，所以这就是为什么大多数值在展望未来时为空的原因。
However I am wondering how to get the value.
但是我想知道如何获得价值。
Cheers
干杯
回答by Lukas Lukac
onPaste: function(e) {
console.log(e.clipboardData.getData('Text'));
},
回答by Jay S.
https://developer.mozilla.org/en-US/docs/Web/API/DataTransfer/types
https://developer.mozilla.org/en-US/docs/Web/API/DataTransfer/types
The formats are Unicode strings giving the type or format of the data, generally given by a MIME type. Some values that are not MIME types are special-cased for legacy reasons (for example "text").
格式是 Unicode 字符串，给出数据的类型或格式，通常由 MIME 类型给出。由于遗留原因（例如“文本”），某些不是 MIME 类型的值是特殊的。
example:
例子：
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'));
}
回答by evgeni fotia
This code check the difference between the input value before pasting and after which I think that it's not limited by any browser support. Here is the Jsfiddle
此代码检查粘贴之前和之后的输入值之间的差异，我认为它不受任何浏览器支持的限制。这是Jsfiddle
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;
}<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react-dom.min.js"></script>
<div id="app"></div>PS: There is some error in this code snippet check the jsfiddle instead
PS：此代码片段中存在一些错误，请改为检查 jsfiddle
回答by Fareed Alnamrouti
first include Facebook DataTransfer module:
首先包括 Facebook DataTransfer 模块：
var DataTransfer = require('fbjs/lib/DataTransfer');
then you can do:
那么你可以这样做：
onPaste: function (evt) {
var data = new DataTransfer(evt.clipboardData);
var text = data.getText();
var html = data.getHTML();
var files = data.getFiles();
},
you welcome ;)
没关系 ;）
回答by Alejandro Silva
the data can be found on clipboardData, and parsed to string as follows:
数据可以在 上找到clipboardData，并解析为字符串，如下所示：
event.clipboardData.items[0].getAsString(text=>{
// do something
})
回答by Santosh Kumar
For me this is quick and worked.
对我来说，这是快速且有效的。
onPaste event fires before the input's value is changed.
onPaste 事件在输入值改变之前触发。
So we need to use e.persist()
所以我们需要使用 e.persist()
<input
onPaste={(e)=>{
e.persist();
setTimeout(()=>{ this.handleChange(e)},4)}
}
value={this.state.value}/>
回答by Brad Wray
Here is maybe a simpler "no paste" example using React hooks
这可能是一个使用 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>
);
}
live demo: https://codesandbox.io/s/material-demo-w61eo?fontsize=14&hidenavigation=1&theme=dark
现场演示：https: //codesandbox.io/s/material-demo-w61eo?fontsize=14&hidenavigation=1&theme=dark
