导入组件的 onclick 事件反应？

Question

我从不同的文件导入了一个组件，如果我点击导入的组件的元素，我想重置我的计时器。有没有办法解决这个问题，或者我应该在单个 jsx 中编写两个组件？

import {SampleComponent} from "../SampleComponent";
<div>
   <SampleComponent  onClick = {?????????}/>
 </div>

Answer 1

onClick如果您想调用父组件中的函数，则每当子组件中发生事件（例如您的情况下的事件）时，您将需要将父函数作为 props 传递。它将如下所示：

class ParentComponent extends React.Component {
 handleClick = () => { ... }

 render {
  return (
   <SampleComponent onClick={this.handleClick} />
  )
 }
}

以下是您的 SampleComponent 的样子：

class SampleComponent extends React.Component {

 render {
  return (
   <div onClick={this.props.onClick}> //to call the function on whole component
    <button onClick={this.props.onClick}>Click Me</button> //to call the function on a specific element
   </div>
  )
 }
}

到目前为止，我从您的问题中了解到的是，只要在 SampleComponent 上发生单击事件（在 SampleComponent 上），您就希望调用 SampleComponent 中的函数。

为此，您的SampleComponent遗嘱如下：

class SampleComponent extends React.Component {
.
.
render() {
 handleClick = () => { ... }

 return (
  <div onClick={this.handleClick}>
    ...
  </div>
 )
}

注意：为此，您不需要在父级中添加 onClick。