Почему мой компонентный метод onClick не запускается? когда пользователи щелкают раскрывающийся элемент, он должен активировать следующий метод с использованием функции .bind (), но вместо этого ничего не происходит, это прекрасно работает при применении в других частях моего приложения на более высоком уровне компонентов.
Typescript Файл, в котором отображается компонент:
export const Options = props => (
<div>
<Dropdown isOpen={props.modalDropDown} toggle={props.toggleDropDown.bind()}>
<DropdownToggle caret>{props.totalWorkloadOptions.optionTitle}</DropdownToggle>
<DropdownMenu>
{props.totalWorkloadOptions.options.map(op => (
// tslint:disable-next-line:no-invalid-this
<DropdownItem key={op} onClick={props.appendChoiceList.bind(props.totalWorkloadOptions.optionTitle, op)}>
{op}
</DropdownItem>
))}
</DropdownMenu>
<strong> {props.totalWorkloadOptions.optionDescription} </strong>
</Dropdown>
<br />
</div>
);
Метод, который я пытаюсь связать с:
appendChoiceList = (title: string, selected: string) => {
console.log('selected:' + selected);
console.log('new choice:' + title);
const newOptionRequest: IWorkloadRequest = {
optionTitle: title,
selectedOption: selected
};
// tslint:disable-next-line:prefer-const
for (let item of this.state.userChoices) {
console.log(item);
if (item.optionTitle === newOptionRequest.optionTitle) {
// If user has already selected this before repalce it
console.log(item);
// tslint:disable-next-line:prefer-const
let i = this.state.userChoices.indexOf(item);
console.log(i);
this.state.userChoices[i] = newOptionRequest;
} else {
// if this choice has not been set before
this.state.userChoices.push(newOptionRequest);
}
}
};