Javascript Can'；t在react 15中触发肿瘤学事件

我试图通过使用onCopy事件处理程序来防止文本被复制到页面上。但似乎根本没有触发处理程序

守则：

  handleCopy (e) {
    console.log('Hello world');
    e.preventDefault();
    e.stopPropagation();
  }

  render () {
    const { id, className, ...props } = this.props;
    const fullClassName = className ? `sr-only ${className}` : 'sr-only ok';
    return (
      <span className={fullClassName} id={id} {...props}
        onCopy={(e) => this.handleCopy(e)}>
        {this.props.children}
      </span>
    );
  }
}

我一直在用这个作为参考

任何帮助都将不胜感激，谢谢

正确的方法是onCopy={this.handleCopy}。这里e是自动传递的。请尝试下面的代码片段。它会起作用的

handleCopy（e）{
log（'helloworld'）；
e、 预防默认值（）；
e、 停止传播（）；
}
render（）{
const{id，className，…props}=this.props；
const fullClassName=className？`sr only${className}`:'sr only ok'；
返回(
{this.props.children}
);
}

正确的方法是onCopy={this.handleCopy}。这里e是自动传递的。请尝试下面的代码片段。它会起作用的

handleCopy（e）{
log（'helloworld'）；
e、 预防默认值（）；
e、 停止传播（）；
}
render（）{
const{id，className，…props}=this.props；
const fullClassName=className？`sr only${className}`:'sr only ok'；
返回(
{this.props.children}
);
}

类屏幕阅读器消息扩展组件{
建造师（道具）{
超级（道具）；
}
手镜（e）{
log（'helloworld'）；
e、 预防默认值（）；
e、 停止传播（）；
}
渲染（）{
const{id，className，…props}=this.props；
const fullClassName=className？`sr only${className}`:'sr only ok'；
返回(
这个.handleCopy（e）}
onContextMenu={（e）=>this.handleCopy（e）}
>
{this.props.children}
);
}
}
ScreenReaderMessage.propTypes={
id:PropTypes.string，
localeKey:PropTypes.string，
子级：PropTypes.oneOfType（[PropTypes.arrayOf（PropTypes.node））、PropTypes.node]）是必需的
};
导出默认屏幕阅读器消息；

希望它能对..

类屏幕阅读器消息组件有所帮助{
建造师（道具）{
超级（道具）；
}
手镜（e）{
log（'helloworld'）；
e、 预防默认值（）；
e、 停止传播（）；
}
渲染（）{
const{id，className，…props}=this.props；
const fullClassName=className？`sr only${className}`:'sr only ok'；
返回(
这个.handleCopy（e）}
onContextMenu={（e）=>this.handleCopy（e）}
>
{this.props.children}
);
}
}
ScreenReaderMessage.propTypes={
id:PropTypes.string，
localeKey:PropTypes.string，
子级：PropTypes.oneOfType（[PropTypes.arrayOf（PropTypes.node））、PropTypes.node]）是必需的
};
导出默认屏幕阅读器消息；

---

希望它能有所帮助。

如果你只是把

onCopy={（）=>alert（'test'）}

放进去，试着删除{…props}。这样做有效吗？我猜你在复制时没有直接进入span元素。这段代码应该能用。@FrankerZ，我试过了，但没有用。如果你只是把

onCopy={（）=>alert（'test'）}

放进去，试着删除{…props}行吗？我猜你在复制时没有直接进入span元素。这段代码应该可以用。@FrankerZ，我试过了，但没有用。你使用的是react 15.0.0或更高版本吗？我使用的是react v15.4.1“依赖项”：{“道具类型”：“^15.7.2”，“react”：“^15.4.1”，“react dom”：“^15.4.1”，“react脚本”：“2.1.5”}这是我的依赖项，但它仍然可以用于创建新的react应用程序和测试您的这部分代码您是否使用react 15.0.0或更高版本？我使用的是react v15.4.1“依赖项”：{“道具类型”：“^15.7.2”，“react”：“^15.4.1”，“react dom”：“^15.4.1”，“react脚本”：“2.1.5”}这是我的依赖项，但它仍然适用于创建新的react应用程序和测试您的这部分代码

.sr-only {
  user-select: none;
}

handleCopy(e) {
    console.log('Hello world');
    e.preventDefault();
    e.stopPropagation();
  }
  render() {
    const { id, className, ...props } = this.props;
    const fullClassName = className ? `sr-only ${className}` : 'sr-only ok';
    return (
      <span className={fullClassName} id={id} {...props}
        onCopy={this.handleCopy}>
        {this.props.children}
      </span>
    );
  }

class ScreenReaderMessage extends BcReactComponent {
    constructor (props) {
      super(props);
    }

    handleCopy (e) {
      console.log('Hello world');
      e.preventDefault();
      e.stopPropagation();
    }

    render () {
      const { id, className, ...props } = this.props;
      const fullClassName = className ? `sr-only ${className}` : 'sr-only ok';
      return (
        <span className={fullClassName} id={id} {...props}
            onCopy={(e)=>this.handleCopy(e)}
            onContextMenu={(e)=>this.handleCopy(e)}
          >
          {this.props.children}
        </span>
      );
    }
  }

  ScreenReaderMessage.propTypes = {
    id: PropTypes.string,
    localeKey: PropTypes.string,
    children: PropTypes.oneOfType([PropTypes.arrayOf(PropTypes.node), PropTypes.node]).isRequired
  };

  export default ScreenReaderMessage;