防止默认的onpaste答案

【问题标题】：Prevent default onpaste防止默认的onpaste
【发布时间】：2015-12-23 22:32:48
【问题描述】：

我正在尝试在 React 中构建自定义粘贴事件。我有一个问题，如果我使用 React 事件，event.preventDefault() 在默认操作已经发生之后运行。

代码如下：

render() {
return (
  <div
  className='compositionText'
  onPasteCapture={this.handlePaste}>
  </div>
);
}

我已经成功地对 DOM 事件监听器做了同样的事情：

componentDidMount() {
this.getDOMNode().addEventListener('paste', this.handlePaste, true);
},

谁能告诉我为什么第一个解决方案不起作用以及我如何以 React 方式实现这一点？

更新：我想补充一点，我在该 div 中使用 Trix 编辑器，如果这有任何改变的话。

【问题讨论】：

看起来可能是 Trix 编辑器的问题，我可以在这里获得 onPasteCapture 的工作版本，jsfiddle.net/Pyloid/69z2wepo/25126 打开开发工具并粘贴，捕获的内容被记录并粘贴为防止。

标签： javascript reactjs dom-events trix

【解决方案1】：

看起来这可能是 Trix 编辑器的问题，因为我能够在此处获得 onPasteCapture 的工作版本，https://jsfiddle.net/Pyloid/69z2wepo/25126/

var Hello = React.createClass({
    handlePaste: function(e) {
        e.preventDefault();
      console.log(e);
    },

        render: function() {
        return <input type="text" onPasteCapture={this.handlePaste} />;
    }
});

ReactDOM.render(
    <Hello name="World" />,
  document.getElementById('container')
);

打开控制面板，查看已注销的捕获内容。

【讨论】：