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

Question

我有一个按钮组件，我们称它为 < MyButton >。

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

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

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

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 换成像 onClientclick={console.log("hello")} 这样的 console.log() 时，它会在控制台中转储“hello”。但是当我尝试通过函数本身来控制日志时却不是。

Answer 1

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>

}

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

React onClientClick not firing my function handler

javascript

events

event-handling

reactjs