Ошибка is not a function в коде React

Нашим агентством нанимался программист для написания небольшого приложения. По некоторым причинам связь с этим человеком больше невозможна, а в его коде обнаружилась ошибка и компетентного человека в штате в данный момент нет, а решение необходимо срочно.

В приложении есть кнопка, которая вызывает форму, в которой есть компонент с мультивыбором полей. Всё это написано на React.js с использованием Redux-form

Ошибка происходит в строке onChange(value); внутри функции handleChangeSelection и звучит как TypeError: onChange is not a function. Буду рад помощи!

Привожу код компонента:

import React from 'react';
import PropTypes from 'prop-types';
import { FieldArray } from 'redux-form';

import FieldBase from '../BaseField2';

import cn from 'classnames';
import styles from './default.module.scss';

function Item({ active, caption, value, name, index }) {
  const itemClassName = cn(styles['list__item'], {
    [styles['list__item--active']]: active,
  });

  return (
    <span data-locator={`multyselect.${name}.${index + 1}`} className={itemClassName} onClick={this._onChange.bind(this, value)}>{caption}</span>
  );
}

Item.propTypes = {
  value: PropTypes.any,
  active: PropTypes.bool,
  caption: PropTypes.string,
  onClick: PropTypes.func,
};

Item.defaultProps = {
  value: null,
  active: false,
  caption: 'No caption',
};

function Items({ items, value, name, fields, value: values, singlify, onChange }) {

  function handleChangeSelection(index, value) {
    const findIndex = values.indexOf(value);
    if (findIndex === -1) {
      if (singlify) {
        fields.removeAll();
      }
      fields.push(value);
    }
    else {
      fields.remove(findIndex);
    }
    onChange(value); // ошибка тут
  }

  return items.map((item, index) => {
    return <Item
      key={index}
      index={index}
      active={ !! ~value.indexOf(item['value'])}
      caption={item['caption']}
      value={item['value']}
      name={name}
      onChange={handleChangeSelection(index)}
    />;
  });
}

Items.propTypes = {
  fields: PropTypes.object,
  items: PropTypes.array,
  value: PropTypes.array,
  singlify: PropTypes.bool,
  onChange: PropTypes.func,
};

Items.defaultProps = {
  items: [],
  value: [],
  singlify: false,
};


const createComponent = ({ fields, _data, _parent, label, list, type, meta: { error, dirty }, onChange, ...props }) => {

  const hasError = dirty && !!error;
  const values = fields.getAll() || [];
  return (
    <FieldBase
      label={label}
      hasError={hasError}
      error={error}
      _parent={_parent}
      _data={fields['name']}
    >
      <div className={styles['list']} data-locator={`multyselect.${fields['name']}`}>
      { !! list.length
        ? <Items items={list} value={values} fields={fields} name={fields['name']} onChange={onChange} {...props} />
        : <span>В списке нет данных</span>}
      </div>
    </FieldBase>
  );
};


export default function MultiSelectField({ label, list, ...props }) {
  return (
    <FieldArray label={label} list={list} {...props} component={createComponent} />
  );
}

MultiSelectField.propTypes = {
  label: PropTypes.string,
  list: PropTypes.array,
  name: PropTypes.string,
  _parent: PropTypes.string,
  _data: PropTypes.string,
};

MultiSelectField.defaultProps = {
  label: null,
  list: [],
  name: '',
  _parent: '',
  _data: '',
};

Ответы (0 шт):