当函数参数为元素ID时，如何调用event.preventDefault()？

你遇到的核心问题是事件绑定方式错误，以及不知道如何同时获取event对象和按钮的标识信息。先纠正你当前代码里的两个关键错误：

1. 你写的onClick={this.OnClickEventOption1(this)}会在组件渲染时直接执行函数，而不是点击按钮时触发——正确的绑定应该是传递函数引用，或者用箭头函数包裹。
2. 不需要把函数参数从按钮ID改成按钮本身，有多种方法可以同时拿到event和按钮标识。

下面是几种可行的解决方案：

方法1：从event.target获取按钮ID（最简单） #

点击事件的event.target就是触发事件的按钮元素，你可以直接从它身上读取id属性，同时调用preventDefault()：

class YourComponent extends React.Component {
  OnClickEvent(event) {
    event.preventDefault();
    // 获取按钮ID
    const buttonId = event.target.id;
    console.log(`被点击的按钮ID是：${buttonId}`);
    // 这里写你的业务逻辑
  }

  render() {
    return (
      <div>
        <button onClick={this.OnClickEvent} id="1" key="1">按钮1</button>
        <button onClick={this.OnClickEvent} id="2" key="2">按钮2</button>
      </div>
    );
  }
}

方法2：用箭头函数传递自定义参数（灵活可控） #

如果不想依赖DOM的id属性，想直接传递自定义标识（比如数字ID、字符串等），可以用箭头函数包裹事件处理函数，同时把event和自定义参数一起传进去：

class YourComponent extends React.Component {
  OnClickEvent(event, buttonId) {
    event.preventDefault();
    console.log(`被点击的按钮ID是：${buttonId}`);
    // 业务逻辑
  }

  render() {
    return (
      <div>
        <button onClick={(e) => this.OnClickEvent(e, 1)} id="1" key="1">按钮1</button>
        <button onClick={(e) => this.OnClickEvent(e, 2)} id="2" key="2">按钮2</button>
      </div>
    );
  }
}

方法3：用bind绑定参数（性能友好） #

如果组件渲染频率很高，箭头函数可能会每次渲染都创建新函数，这时可以用bind来提前绑定参数，event会自动作为最后一个参数传入：

class YourComponent extends React.Component {
  constructor(props) {
    super(props);
    // 也可以在构造函数里提前绑定，避免每次渲染重复绑定
    // this.OnClickEvent = this.OnClickEvent.bind(this);
  }

  OnClickEvent(buttonId, event) {
    event.preventDefault();
    console.log(`被点击的按钮ID是：${buttonId}`);
    // 业务逻辑
  }

  render() {
    return (
      <div>
        <button onClick={this.OnClickEvent.bind(this, 1)} id="1" key="1">按钮1</button>
        <button onClick={this.OnClickEvent.bind(this, 2)} id="2" key="2">按钮2</button>
      </div>
    );
  }
}

额外提醒： #

• 注意render的拼写（你代码里写成了redrer），这会导致语法错误。
• 如果是函数组件，逻辑类似，只是不需要处理this的绑定问题，直接用箭头函数或者普通函数即可。

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