代码之家 › 专栏 › 技术社区 › danielschnoll

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

event-handling events reactjs javascript

danielschnoll · 技术社区 · 3 年前

我有一个按钮组件,我们称之为<我的按钮>。

<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>

}

为什么是我的 更改颜色 当我像这样构建它时,功能不起作用 计算 功能?

奇怪的是,当我换掉 this.changeColor 对于a console.log() 喜欢 onClientclick={console.log("hello")} 它在控制台中转储“hello”。但当我试图通过函数本身来控制台日志时就不会了。

0 回复 | 直到 3 年前

Drew Reese 3 年前

React不知道什么 onClientClick 是或如何处理它。如果你只是想添加额外的 onClick 你可以将其与现有的逻辑相结合 单击 回拨。

请参阅 Synthetic Events

具体来说 Mouse Events

单击“下一步”菜单双击拖动结束输入 onDragExit onDragLeave onDragOver onDragStart onDrop on MouseDown onMouseEnter on MouseLeave on MouseMove on MouseOut on MouseOver on MouseUp

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>

}