React onClick事件在三星原生浏览器中无法触发的技术问询

我之前也碰到过三星原生浏览器对React事件绑定的兼容坑，给你几个经过验证的解决办法，按优先级推荐：

1. 使用类属性箭头函数绑定事件（最推荐） #

箭头函数会自动捕获组件实例的this，不用手动bind，而且三星原生浏览器对这种方式的支持更稳定。同时建议把href="javascript:void(0)"换成href="#"并阻止默认行为，避免浏览器的跳转逻辑干扰事件：

class Clicked extends React.Component{
  // 用箭头函数定义方法，自动绑定this
  mark = (e) => {
    e.preventDefault(); // 阻止默认跳转，避免页面回到顶部
    console.log('clicked');
  }

  render() {
    return (<a href="#" onClick={this.mark}>click</a>)
  }
}

2. 在constructor中提前绑定this #

避免在render方法内使用bind(this)——因为每次渲染都会创建新的函数实例，某些旧版本的三星原生浏览器对这种动态绑定的函数处理有兼容性问题。提前在构造函数里绑定更可靠：

class Clicked extends React.Component{
  constructor(props) {
    super(props);
    // 提前绑定this到组件实例
    this.mark = this.mark.bind(this);
  }

  mark() {
    console.log('clicked');
  }

  render() {
    return (<a href="javascript:void(0)" onClick={this.mark}>click</a>)
  }
}

3. 替换a标签为非链接元素 #

如果你的按钮不需要a标签的语义（比如跳转），可以换成button或div，三星原生浏览器有时候会优先处理a标签的href逻辑，导致onClick事件被忽略：

class Clicked extends React.Component{
  mark = () => {
    console.log('clicked');
  }

  render() {
    // 用button标签，通过样式模拟a标签的外观
    return (
      <button 
        onClick={this.mark} 
        style={{
          background: 'none',
          border: 'none',
          color: '#0066cc',
          textDecoration: 'underline',
          cursor: 'pointer'
        }}
      >
        click
      </button>
    )
  }
}

4. 兜底方案：使用原生事件绑定 #

如果上面的方法都无效，可以绕开React的合成事件系统，直接用原生DOM事件绑定：

class Clicked extends React.Component{
  componentDidMount() {
    // 组件挂载后绑定原生click事件
    this.linkElement.addEventListener('click', this.mark);
  }

  componentWillUnmount() {
    // 组件卸载前移除事件监听，避免内存泄漏
    this.linkElement.removeEventListener('click', this.mark);
  }

  mark = (e) => {
    e.preventDefault();
    console.log('clicked');
  }

  render() {
    // 通过ref获取DOM元素
    return (<a href="javascript:void(0)" ref={el => this.linkElement = el}>click</a>)
  }
}

一般前两种方案就能解决问题，你可以先试试第一种，不行再依次排查。

内容的提问来源于stack exchange，提问作者Nithish