用户定义的组件上的onClick不起作用

时间:2018-11-23 09:19:15

标签: reactjs onclick

我的渲染器中有一个组件:

scrollToTop() {
  console.log('scrollToTop');
  let intervalId = setInterval(this.scrollStep.bind(this), this.props.delayInMs);
  this.setState({ intervalId: intervalId });
}

<Link
  data={this.state.topLinkData}                                                          
  onClick={this.scrollToTop}                                                             
  scrollStepInPx="100"                                                           
  delayInMs="1" />

scrollToTop也绑定在构造函数中。

this.scrollToTop = this.scrollToTop.bind(this);

链接组件如下:

class Link extends BaseComponent {
  classToBeAdded() {
    this.classToAdded = constStyles[`${this.props.data.linkType}AStyle`];
  }

  componentWillMount() {
    this.classToBeAdded();
  }

  dataPassing(obj) {
    return {
      id: obj.id,
      value: obj.value
    };
  }

  render() {
    return (
      <div>
        <p>
          <a
            className={this.classToAdded}
            onClick={() =>
              this.delegateHandler('onClick',{ 
                id: this.props.data.id, value: this.props.data.href 
              },this.dataPassing)
            } >
            {this.props.data.label}
          </a>
        </p>
      </div>
    );
  }
}

delegateHandler是一个函数,其编写方式如下:

delegateHandler(propertyName, event, args) {
  if (
    this.props.data &&
    this.props.data.hasOwnProperty(propertyName) &&
    this.props.data[propertyName] instanceof Function
  ) {
    console.log('fn passed');
    let response =this.props.data[propertyName](
      args instanceof Function
      ? args(event)
      : Object.assign({}, { id: event.target.id, value: event.target[args] })
    );
    return response;
  } else {
    console.log('fn not passed');
  }
}

当我尝试单击函数scrollToTop时,没有被调用。这是什么问题?

0 个答案:

没有答案
相关问题