如何使用 ES2015 在 React 中传递道具和停止事件传播？答案

【问题标题】：How to pass props and stop event propagation in React using ES2015?如何使用 ES2015 在 React 中传递道具和停止事件传播？
【发布时间】：2023-03-14 19:24:01
【问题描述】：

我设置了一个简单的组件，并试图弄清楚如何在同一个处理程序中传递参数和停止事件传播。在链接的示例中，我想将与正方形关联的数字传递给单击处理程序，防止默认单击行为并使用该数字来增加计数器。我尝试传递额外参数的每一种技术都会阻止e.preventDefault() 阻止默认行为。

http://codepen.io/anon/pen/JKGKBz?editors=0010

【问题讨论】：

标签： javascript reactjs ecmascript-6

【解决方案1】：

只需将值和事件传递给 handleClick 函数。

类似的东西

handleClick(number,e) {
    e.preventDefault();
    this.setState({total: this.state.total + number})
  }

 render() {
     return (
       <div>
         <h1>{this.state.total}</h1>
       {[0,1,2,3,4].map( (number) => {
       return (
         <a href="/" onClick={(e) => this.handleClick(number,e)}>{number}</a>
        )
     })}
         </div>
     )
}

jsfiddle

或

handleClick(number,e) {
    e.preventDefault();
    this.setState({total: this.state.total + number})
}

render() {
     return (
       <div>
         <h1>{this.state.total}</h1>
       {[0,1,2,3,4].map( (number) => {
       return (
         <a href="/" onClick={this.handleClick.bind(this,number)}>{number}</a>
        )
     })}
         </div>
     )
}

jsfiddle

【讨论】：

所以，这行得通 - 我缺少的是将事件传递给处理程序。为什么我需要在 (e) => {} 中包含“e”，而不是仅在参数中指定它？我认为这是我的理解崩溃。谢谢！
因为 SyntheticEvent 被传递给事件处理函数，在本例中为 (e) => {} 。我添加了第二种方法来传递参数，而不使用 onClick 事件中的函数。