反应 onClientClick 没有触发我的函数处理程序

如何解决反应 onClientClick 没有触发我的函数处理程序

我有一个按钮组件，我们称之为 。

<MyButton
  onClick={this.props.calculate}
  onClientClick={this.changeColor}
>
   Calculate
</MyButton>

当我单击按钮时，我的 calculate 函数会触发。它是一个存在于父组件类中的箭头函数，以事件为参数，如 calculate = (event) =>{...}

但是当我单击按钮时，changeColor 函数不会触发。它也是一个箭头函数，但它存在于我正在使用的组件类中。总的来说，使用我的按钮代码，它看起来像这样

class Toolbar extends Component {

    // a bunch of functions
  
   changeColor = (event) =>{
        console.log("here")
   }

   // more code
   <MyButton onClick={this.props.calculate} onClientClick={this.changeColor}>
      Calculate
   </MyButton>

}

为什么我的 changeColor 函数不起作用，而我的结构类似于 calculate 函数？

奇怪的是，当我将 this.changeColor 换成 console.log() 之类的 onClientclick={console.log("hello")} 时，它会在控制台中转储“hello”。但当我尝试通过函数本身进行控制台日志时则不然。

解决方法

React 不知道 onClientClick 是什么或如何处理它。如果您只是想添加额外的 onClick 逻辑，您可以将其与现有的 onClick 回调结合使用。

见Synthetic Events

特别是Mouse Events

onClick onContextMenu onDoubleClick onDrag onDragEnd onDragEnter onDragExit onDragLeave onDragOver onDragStart onDrop onMouseDown onMouseEnter onMouseLeave onMouseMove onMouseOut onMouseOver onMouseUp

class Toolbar extends Component {

  // a bunch of functions
  
  changeColor = (event) =>{
    console.log("here")
  }

  // Define custom click handler to invoke both the passed
  // calculate callback and the changeColor callback
  clickHandler = event => {
    this.props.calculate(event);
    this.changeColor(event);
  }

  // more code

  <MyButton onClick={this.clickHandler}>
    Calculate
  </MyButton>

}