Question

我已经从其他文件导入了组件，如果我单击导入的组件的元素，我想重置计时器。有没有办法解决这个问题，还是应该用单个jsx 编写这两个组件？

 import { FormGroup, FormBuilder, Validators} from '@angular/forms';

constructor(private fb: FormBuilder) {  }

this.form = this.fb.group({
    amount: [null, Validators.compose([Validators.required, Validators.min(0.01), Validators.max(999999.99)])],
  });

Answer 1

您可以在这里做

import {SampleComponent} from "../SampleComponent";

<div onClick={??????}>
   <SampleComponent/>
</div>

或者您可以从父组件传递函数，然后在子组件的顶部节点上添加click事件。

<div>
   <SampleComponent onHandleClick={() => ??????}/>
</div>

Answer 2

如果要在父组件中调用函数，则无论何时在子组件中发生事件（例如您的案例中的onClick事件），都需要将父函数作为道具传递。它将是这样的：

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。

Answer 3

resetTimerHandler = (timer)=>{
    timer = 0; or this.setState({timer: 0}) // how ever you are defining timer
}
render(){
    let displayTimer;
    this.updateTimer(displayTimer)// However you are updating timer
    return(
        <SampleComponent onClick={this.resetTimerHandler.bind(this,displayTimer)} />)

在不知道如何更新计时器的情况下，我无法真正给出具体答案，但是您应该能够应用此虚拟代码。

Answer 4

在没有更多上下文的情况下很难回答您的问题（例如您想重置哪个计时器）。但是答案是否，您不需要在同一文件中实现这两个组件。这是对传递道具（如您在问题中尝试做的事情）做出反应的基础。

这里是一个例子。假设您的SampleComponent如下所示：

// SampleComponent.jsx

function SampleComponent({ onClick }) { // the argument is an object full of the props being passed in
  return (
    <button onClick={(event) => onClick(event)}>Click Me!</button>
  );
}

，正在使用SampleComponent的组件如下所示：

import SampleComponent from '../SampleComponent';

function resetTimer() {
  // Add logic to reset timer here
}

function TimerHandler() {
  return (
    <SampleComponent onClick={() => resetTimer()} />
  );
}

现在，当您单击由button渲染的SampleComponent时，将调用从onClick传递的TimerHandler处理程序。

React组件上的道具实际上只是传递给function的参数：）

导入组件的onclick事件是否反应？

4 个答案: