作为回调发送的函数未在容器组件中触发

Question

我有一个容器组件，我的功能很少，例如这两个：

newPeriodeCallback() {
    const {
      behandlingFormPrefix, perioder, periodeTyper, utsettelseArsaker,
    } = this.props;

    const {
      uttakNyPeriodeFom, uttakNyPeriodeTom, uttakNyPeriodeType, uttakNyPeriodeAndel, uttakNyPeriodeArsak,
    } = this.props.nyPeriode;

    const getPeriodeData = (periode, periodeArray) => periodeArray
      .filter(({ kode }) => kode === periode);

    const periodeObjekt = getPeriodeData(uttakNyPeriodeType, periodeTyper)[0];
    const arsakObjekt = getPeriodeData(uttakNyPeriodeArsak, utsettelseArsaker)[0];

    const utsettelseÅrsak = arsakObjekt !== undefined ? {
      kode: arsakObjekt.kode,
      kodeverk: arsakObjekt.kodeverk,
      navn: arsakObjekt.navn,
    } : {};
    const nyPeriode = [{
      arbeidstidsprosent: uttakNyPeriodeAndel,
      bekreftet: false,
      fom: uttakNyPeriodeFom,
      saksebehandlersBegrunnelse: null,
      tom: uttakNyPeriodeTom,
      utsettelseÅrsak,
      uttakPeriodeType: {
        kode: periodeObjekt.kode,
        kodeverk: periodeObjekt.kodeverk,
        navn: periodeObjekt.navn,
      },
    }];

    this.props.reduxFormChange(`${behandlingFormPrefix}.UttakInfoPanel`, 'perioder', perioder.concat(nyPeriode)
      .sort((a, b) => a.fom > b.fom));

    this.setState({ isNyPeriodeFormOpen: !this.state.isNyPeriodeFormOpen });
  }

  removePeriodCallback(index) {
    const { behandlingFormPrefix, perioder } = this.props;

    this.props.reduxFormChange(
      `${behandlingFormPrefix}.UttakInfoPanel`, 'perioder',
      perioder.filter((e, i) => i === index)
        .sort((a, b) => a.fom > b.fom),
    );
  }

我将这两个函数作为回调发送到不同的组件：

<FieldArray
          name="perioder"
          component={UttakPeriode}
          removePeriodCallback={this.removePeriodCallback}
          inntektsmelding={inntektsmelding}
        />
<UttakNyPeriode newPeriodeCallback={this.newPeriodeCallback} />

我遇到的问题是当我点击发送newPeriodeCallback的组件中的按钮时：

<Hovedknapp
        className={styles.oppdaterMargin}
        htmlType="button"
        mini
        onClick={newPeriodeCallback}
      >

在检查控制台的容器组件中，我看到removePeriodCallback也被触发，然后删除了在函数newPeriodeCallback中添加的新句点。为什么会发生这种情况，我该如何解决这个问题？

更新

我已按照评论中的建议尝试使用onClick中的箭头功能，如下所示：

  <Image
      className={styles.removeIcon}
      src={removePeriod}
      onClick={() => removePeriodCallback(index)}
      alt="Slett periode"
    />

这已经阻止了该函数从其他地方触发，但它也没有触发onClick。这段代码有什么问题？

这是完整的子组件：

export const UttakPeriodeType = ({
  bekreftet,
  tilDato,
  fraDato,
  uttakPeriodeType,
  removePeriodCallback,
  index,
}) => (
  <div className={classNames('periodeType', { active: !bekreftet })}>
    <div className={styles.headerWrapper}>
      <Element>{uttakPeriodeType.navn}</Element>
      <div>
        <Image src={editPeriod} alt="Rediger periode" />
        <Image
          className={styles.removeIcon}
          src={removePeriod}
          onClick={() => removePeriodCallback(index)}
          alt="Slett periode"
        />
      </div>
    </div>
    <div>

这是图像组件：

import React, { Component } from 'react';
import PropTypes from 'prop-types';
import { injectIntl, intlShape } from 'react-intl';

import Tooltip from 'sharedComponents/Tooltip';


export class Image extends Component {
  constructor() {
    super();

    this.state = {
      isHovering: false,
    };

    this.onFocus = this.onFocus.bind(this);
    this.onBlur = this.onBlur.bind(this);
    this.onKeyDown = this.onKeyDown.bind(this);
  }

  onFocus() {
    this.setState({ isHovering: true });
  }

  onBlur() {
    this.setState({ isHovering: false });
  }

  onKeyDown(e) {
    if (e.key === 'Enter' || e.key === ' ') {
      this.props.onKeyDown(e);
      e.preventDefault();
    }
  }

  render() {
    const image = (<img // eslint-disable-line jsx-a11y/no-noninteractive-element-interactions
      className={this.props.className}
      src={this.props.src !== null ? this.props.src : this.props.imageSrcFunction(this.state.isHovering)}
      alt={this.props.altCode ? this.props.intl.formatMessage({ id: this.props.altCode }) : this.props.alt}
      title={this.props.titleCode ? this.props.intl.formatMessage({ id: this.props.titleCode }) : this.props.title}
      tabIndex={this.props.tabIndex}
      onMouseOver={this.onFocus}
      onMouseOut={this.onBlur}
      onFocus={this.onFocus}
      onBlur={this.onBlur}
      onKeyDown={this.onKeyDown}
      onMouseDown={this.props.onMouseDown}
    />);

    if (this.props.tooltip === null) {
      return image;
    }

    return (
      <Tooltip header={this.props.tooltip.header} body={this.props.tooltip.body}>
        {image}
      </Tooltip>
    );
  }
}

Image.propTypes = {
  className: PropTypes.string,
  src: PropTypes.oneOfType([
    PropTypes.string,
    PropTypes.shape(),
  ]),
  imageSrcFunction: PropTypes.func,
  onMouseDown: PropTypes.func,
  onKeyDown: PropTypes.func,
  alt: PropTypes.string,
  altCode: PropTypes.string,
  title: PropTypes.string,
  titleCode: PropTypes.string,
  tabIndex: PropTypes.string,
  tooltip: PropTypes.shape({
    header: PropTypes.string.isRequired,
    body: PropTypes.string,
  }),
  intl: intlShape.isRequired,
};

Image.defaultProps = {
  className: '',
  src: null,
  imageSrcFunction: null,
  onMouseDown: null,
  onKeyDown: null,
  tabIndex: null,
  tooltip: null,
  alt: null,
  altCode: null,
  title: null,
  titleCode: null,
};

export default injectIntl(Image);