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

Question

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

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

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

干杯

Answer 1

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

Answer 2

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

Answer 3

这可能是一个使用 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