Ошибка 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: '',
};